diff --git a/bar.js b/bar.js index a21b5e0..c2e1b9a 100644 --- a/bar.js +++ b/bar.js @@ -1,5 +1,5 @@ /*global d3*/ -H5P.Chart.BarChart = (function () { +H5P.NDLAChart.BarChart = (function () { /** * Creates a bar chart from the given data set. @@ -94,8 +94,7 @@ H5P.Chart.BarChart = (function () { var height = h - tickSize - lineHeight; // Add space for labels below // Update SVG size - svg.attr("width", width) - .attr("height", h); + svg.attr('viewBox', `0 0 ${width} ${h}`); // Update scales xScale.rangeRoundBands([0, width], 0.05); @@ -125,7 +124,7 @@ H5P.Chart.BarChart = (function () { return height - yScale(d.value) + lineHeight; }); - // Hide ticks from readspeakers, the entire rectangle is already labelled + // Hide ticks from screen readers, the entire rectangle is already labelled xAxisG.selectAll("text").attr("aria-hidden", true); }; } diff --git a/chart.css b/chart.css index bdd97f4..9ae9b5d 100644 --- a/chart.css +++ b/chart.css @@ -1,9 +1,10 @@ .h5p-chart svg { display: block; margin: 0 auto; -} -.h5p-chart-chart { - font-size: 0.75em; + font-size: 12px; + font-size: min(16px, 0.9em); + width: 100%; + height: 100%; } .h5p-chart-bar { width: 100%; @@ -31,3 +32,44 @@ height:1px; overflow:hidden; } + +.h5p-chart .text-rect { + fill: black; + opacity: 0.7; +} + + +.h5p-chart circle:focus, .h5p-chart .bar:focus { + outline: dodgerblue 2px solid; +} + +.h5p-chart .line-path { + fill: none; + stroke-width: 2px; +} + +.h5p-chart .chart-title { + font-size: 1.5em; + font-weight: bold; +} + +.h5p-chart .y-axis .tick line { + stroke: black; + opacity: 0.4; +} + +.h5p-chart .axis-title { + font-size: 1.3em;; + font-weight: bold; +} +.h5p-chart text { + font-size: 1.1em;; +} +.h5p-chart .text-node { + fill: white; + font-size: 1.2em; + dominant-baseline: central; +} +.h5p-chart .y-axis path { + stroke-width: 0; +} diff --git a/chart.js b/chart.js index 3371e92..cbf240a 100644 --- a/chart.js +++ b/chart.js @@ -5,7 +5,7 @@ * @external {jQuery} $ H5P.jQuery * @external {EventDispatcher} EventDispatcher H5P.EventDispatcher */ -H5P.Chart = (function ($, EventDispatcher) { +H5P.NDLAChart = (function ($, EventDispatcher) { /** * Initialize module. @@ -34,8 +34,8 @@ H5P.Chart = (function ($, EventDispatcher) { self.params.listOfTypes = [ { text: 'Cat', - value: 1, - color: '#D3D3D3', + value: 4, + color: '#fbb033', fontColor: '#000' }, { @@ -53,15 +53,33 @@ H5P.Chart = (function ($, EventDispatcher) { ]; } - // Set the figure definition for readspeakers if it doesn't exist + // Set the figure definition for screen readers if it doesn't exist if (!self.params.figureDefinition) { self.params.figureDefinition = "Chart"; } // Keep track of type. - self.type = (self.params.graphMode === 'pieChart' ? 'Pie' : 'Bar'); + self.type = getChartType(self.params.graphMode); } + function getChartType(graphMode) { + switch (graphMode) { + case 'pieChart': + return 'Pie'; + + case 'barChart': + return 'Bar'; + + case 'extendedBarChart': + return 'ExtendedBar'; + + case 'lineChart': + return 'Line'; + + default: + return 'Pie'; + } + } // Inheritance Chart.prototype = Object.create(EventDispatcher.prototype); Chart.prototype.constructor = Chart; @@ -106,7 +124,7 @@ H5P.Chart = (function ($, EventDispatcher) { self.$wrapper = $('
', { 'class': 'h5p-chart-chart h5p-chart-' + self.type.toLowerCase() }); - self.chart = new H5P.Chart[self.type + 'Chart'](self.params, self.$wrapper); + self.chart = new H5P.NDLAChart[self.type + 'Chart'](self.params, self.$wrapper); } // Prepare container diff --git a/extendedBar.js b/extendedBar.js new file mode 100644 index 0000000..4383dd8 --- /dev/null +++ b/extendedBar.js @@ -0,0 +1,265 @@ +/*global d3*/ +H5P.NDLAChart.ExtendedBarChart = (function () { + + /** + * Creates a bar chart from the given data set. + * + * Notice: ExtendedBar uses its own listOfTypes in h5p-chart/semantics.json, its differentiated through the use of "showWhen"-widget + * @class + * @param {Object} params from semantics, contains data set + * @param {H5P.jQuery} $wrapper + */ + function extendedBarChart(params, $wrapper) { + var self = this; + var dataSet = params.listOfTypes; + var defColors = d3.scale.ordinal() + .range(['#fbb033', '#2f2f2f', '#FFB6C1', '#B0C4DE', '#D3D3D3', '#20B2AA', '#FAFAD2']); + + //Lets check if the axes titles are defined, used for setting correct offset for title space in the generated svg + var chartTextDefined = !!params.chartText; + var isXAxisTextDefined = !!params.xAxisText; + var isYAxisTextDefined = !!params.yAxisText; + + var ariaChartText = chartTextDefined ? params.chartText : ""; + var ariaXaxisText = isXAxisTextDefined ? params.xAxisText : ""; + var ariaYaxisText = isYAxisTextDefined ? params.yAxisText : ""; + // Create scales for bars + var xScale = d3.scale.ordinal() + .domain(d3.range(dataSet.length)); + + var yScale = d3.scale.linear() + .domain([0, d3.max(dataSet, function (d) { + return d.value ; + })]); + var x = d3.time.scale(); + var y = d3.scale.linear(); + + var xAxis = d3.svg.axis() + .scale(xScale) + .orient('bottom') + .tickFormat(function (d) { + return dataSet[d % dataSet.length].text; + }); + + var yAxis = d3.svg.axis() + .scale(yScale) + .orient('left'); + // Create SVG element + var svg = d3.select($wrapper[0]) + .append('svg'); + + svg.append('desc').html('chart'); + svg.attr("aria-label", "Bar chart, title: " + ariaChartText + + ", X axis title: " + ariaXaxisText + ", Y axis text: " + ariaYaxisText); + // Create x axis + var xAxisG = svg.append('g') + .attr('class', 'x-axis'); + + var yAxisG = svg.append('g') + .attr('class', 'y-axis') + + /** + * @private + */ + var key = function (d) { + return dataSet.indexOf(d); + }; + //rectGroup is for grouping the bars in + var rectGroup = svg.append("g") + .attr("class", "rect-group"); + + // Create rectangles for bars + var rects = rectGroup.selectAll('rect') + .data(dataSet, key) + .enter() + .append('rect') + .attr("tabindex", 0) + .attr('focusable', 'true') + .attr('class', 'bar') + .attr("aria-label", (data) => "Y axis: " + ariaYaxisText + ": " + data.value + + ", X axis: " + ariaXaxisText + ": " + data.text) + .attr('fill', function(d) { + if(params.overrideColorGroup && params.overrideColorGroup.overrideChartColorsTick ){ + return params.overrideColorGroup.overrideChartColor; + } + if (d.color !== undefined) { + return d.color; + } + return defColors(dataSet.indexOf(d) % 7); + }); + + var chartText = svg.append('text') + .style('text-anchor', 'middle') + .attr('class', 'chart-title') + .text(params.chartText); + + var xAxisTitle = svg.append('text') + .style('text-anchor', 'middle') + .attr('class', 'axis-title') + .text(params.xAxisText); + + var yAxisTitle = svg.append('text') + .style('transform', 'rotate(90deg)') + .attr('class', 'axis-title') + .text(params.yAxisText); + + // Create inner rect labels + var xAxisGTexts = svg.selectAll('x-axis text') + .data(dataSet, key) + .enter(); + + // Create inner rect labels + var barTexts = rectGroup + .selectAll('text') + .data(dataSet, key) + .enter() + .append('text') + .attr('text-anchor', 'middless') + .text(function(d) { + return d.value; + }) + .attr('text-anchor', 'middless') + .attr('fill', function (d) { + if(params.overrideColorGroup && params.overrideColorGroup.overrideChartColorsTick ){ + return params.overrideColorGroup.overrideChartColorText; + } + if (d.fontColor !== undefined) { + return d.fontColor; + } + return '000000'; + }) + .attr('aria-hidden', true); + + /** + * Fit the current bar chart to the size of the wrapper. + */ + self.resize = function () { + // Always scale to available space + var style = window.getComputedStyle($wrapper[0]); + var horizontalPadding = Math.max(parseFloat(style.width) / 12, 40); + var verticalPadding = Math.max(parseFloat(style.height) / 12, 20); + var width = parseFloat(style.width) - horizontalPadding; + var h = parseFloat(style.height) - verticalPadding; + var fontSize = parseFloat(style.fontSize); + var lineHeight = (1.25 * fontSize); + var xTickSize = (fontSize * 0.125); + var xAxisRectOffset = lineHeight * 3; + //If chart title doesnt exist, we still make an offset + var chartTitleTextHeight = chartTextDefined ? svg.select('.chart-title')[0][0].getBoundingClientRect().height : 20; + var chartTitleTextOffset = chartTitleTextHeight + lineHeight + verticalPadding; // Takes the height of the text element and adds line height, so we always have som space under the title + var height = h - xTickSize - (lineHeight * 2) - chartTitleTextOffset; // Add space for labels below, and also the chart title + //if xAxisTitle exists, them make room for it by adding more lineheight + if(isXAxisTextDefined) { + height = h - xTickSize - (lineHeight * 4) - chartTitleTextOffset; + } + // Update SVG size + svg.attr('viewBox', `0 0 ${width + horizontalPadding} ${h + verticalPadding}`); + + // Update scales + xScale.rangeRoundBands([0, width - xAxisRectOffset], 0.05); //In order for the X scale to NOT overlap Y axis ticks, we define and offset, making the X scale start further away from the svg wrapper edge + yScale.range([height, 0]); //Unlike in 'bar.js', we have 'flipped' the chart, making origo to be in top left corner of chart. This is due to the nature of the Y axis ticks + + x.range([0, width]); + y.range([height, 0]); + + xAxis.tickSize([0]); + xAxisG.call(xAxis); + + yAxisG.call(yAxis + .tickSize(-width, 0, 0) + .ticks(getSmartTicks(d3.max(dataSet).value).count)); + //Gets first text element from the Y Axis + var yAxisTicksText = yAxisG.selectAll('g.tick text')[0]; + //Gets width of last Y Axis tick text elements + var yAxisLastTickWidth = yAxisTicksText[yAxisTicksText.length-1].getBoundingClientRect().width; + + var minYAxisGMargin = 20; + var yAxisTitleWidth = yAxisTitle[0][0].getBoundingClientRect().width; + //x translateion differs from when the y axis title text is defined + const xTranslation = (isYAxisTextDefined ? yAxisLastTickWidth + yAxisTitleWidth + minYAxisGMargin : yAxisLastTickWidth); + + // Y translation used for y axis tick group + const yTranslation = chartTitleTextOffset; + + xAxisG.attr('transform', `translate(${xTranslation + minYAxisGMargin + xScale.rangeBand()/2}, ${lineHeight/2})`); + yAxisG + .attr('transform', `translate(${xTranslation + lineHeight}, ${yTranslation})`); + //Sets the axes titles on resize + chartText + .attr('x', width/2 ) + .attr('y', lineHeight); + + xAxisTitle + .attr('x', width/2 ) + .attr('y', h-2); + yAxisTitle + .attr('x', height/2) + .attr('y', 0); + var xAxisGTexts = svg.selectAll('g.x-axis g.tick'); + + xAxisGTexts.attr('transform', function(d, i) { + var x = xScale(i); + var y = chartTitleTextOffset + height; + return `translate (${x}, ${y})`; + + }); +//positioning the rectgroup + rectGroup.attr('transform', `translate(${xTranslation + lineHeight}, ${chartTitleTextOffset})`); + + //rects are already inside the rectGroup, so we need to position them + rects.attr('x', function(d, i) { + return xScale(i); + }).attr('y', function(d) { + return yScale(d.value); + }).attr('width', xScale.rangeBand()) + .attr('height', function(d) { + return height - yScale(d.value) ; + }); + + var offsetFromBar = 5; + // Re-locate text value labels + + barTexts.attr('x', function(d, i) { + var barTextWidth = this.getBoundingClientRect().width; + return xScale(i) + xScale.rangeBand() / 2 - barTextWidth / 2; + + }).attr('y', function(d) { + return yScale(d.value) - offsetFromBar; + }); + + + // Hide ticks from screen readers, the entire rectangle is already labelled + xAxisG.selectAll('text').attr('aria-hidden', true); + }; + } + + /** + * Calculates number of ticks based on an array of numbers + * @param val + * @returns {{endPoint: number, count: number}} + */ + function getSmartTicks(val) { + + //base step between nearby two ticks + var step = Math.pow(10, val.toString().length - 1); + + //modify steps either: 1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 2000... + if (val / step < 2) { + step = step / 5; + } else if (val / step < 5) { + step = step / 2; + } + + //add one more step if the last tick value is the same as the max value + //if you don't want to add, remove '+1' + var slicesCount = Math.ceil((val + 1) / step); + + return { + endPoint: slicesCount * step, + count: Math.min(10, slicesCount) //show max 10 ticks + }; + + } + + return extendedBarChart; +})(); diff --git a/language/.en.json b/language/.en.json index 4c215f9..b2f3e8c 100644 --- a/language/.en.json +++ b/language/.en.json @@ -1,40 +1,97 @@ { "semantics": [ - { - "label": "Type of chart", - "options": [ - { - "label": "Pie Chart" - }, - { - "label": "Bar Chart" + { + "label": "Type of chart", + "options": [ + { + "label": "Pie Chart" + }, + { + "label": "Bar Chart" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" + } + ] + }, + { + "label": "Data elements", + "entity": "option", + "field": { + "label": "Data element", + "fields": [ + { + "label": "Name" + }, + { + "label": "Value" + }, + { + "label": "Color" + }, + { + "label": "Font Color" + } + ] } - ] - }, - { - "label": "Data elements", - "entity": "option", - "field": { - "label": "Data element", + }, + { + "label": "Text read by screen readers defining the figure as a chart.", + "default" : "Chart" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", "fields": [ { - "label": "Name" + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." }, { - "label": "Value" + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" }, { - "label": "Color" - }, + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ { - "label": "Font Color" + "label": "Color of the line in the chart" } ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } - }, - { - "label": "Text read by readspeakers defining the figure as a chart.", - "default": "Chart" - } - ] + ] } diff --git a/language/ar.json b/language/ar.json index 3150ea0..8086800 100644 --- a/language/ar.json +++ b/language/ar.json @@ -8,6 +8,12 @@ }, { "label": "مخطط شريطي" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "قراءة النص بواسطة آلية تحويل النص الى كلام وذلك بتعريف الشكل كمخطط.", "default": "Chart" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/bg.json b/language/bg.json index ac13698..83d523f 100644 --- a/language/bg.json +++ b/language/bg.json @@ -8,6 +8,12 @@ }, { "label": "Лентова диаграма" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "Текст, прочетен от четци на екранен текст, определящ фигурата като диаграма.", "default": "Диаграма" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } \ No newline at end of file diff --git a/language/bs.json b/language/bs.json index 4ece929..b916eda 100644 --- a/language/bs.json +++ b/language/bs.json @@ -8,6 +8,12 @@ }, { "label":"Stupčaski grafikon" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -33,8 +39,59 @@ } }, { - "label": "Text read by readspeakers defining the figure as a chart.", + "label": "Text read by screen readers defining the figure as a chart.", "default": "Chart" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/ca.json b/language/ca.json index 58383c0..b45781a 100644 --- a/language/ca.json +++ b/language/ca.json @@ -8,6 +8,12 @@ }, { "label": "Diagrama de barres" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "Text llegit pels altaveus de lectura en què es defineix la figura com a gràfic.", "default": "Diagrama" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/cs.json b/language/cs.json index 464e486..c634e75 100644 --- a/language/cs.json +++ b/language/cs.json @@ -8,6 +8,12 @@ }, { "label": "Sloupcový graf" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "Text čtený čtecím zařízení definující obrázek jako graf.", "default": "Graf" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/de.json b/language/de.json index 10ec5ed..fafaf07 100644 --- a/language/de.json +++ b/language/de.json @@ -8,6 +8,12 @@ }, { "label": "Balkendiagramm" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "Text, den ein Vorlesewerkzeug vorliest, um die Abbildung als Diagramm auszuweisen (Barrierefreiheit)", "default": "Diagramm" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/el.json b/language/el.json index c25104f..1f6a804 100644 --- a/language/el.json +++ b/language/el.json @@ -8,6 +8,12 @@ }, { "label":"Ραβδόγραμμα" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "Κείμενο ακουστικής υποβοήθησης που ορίζει το σχήμα ως γράφημα.", "default": "Γράφημα" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/es-mx.json b/language/es-mx.json index 9284b05..3e26295 100644 --- a/language/es-mx.json +++ b/language/es-mx.json @@ -7,7 +7,13 @@ "label": "Gráfico de Pastel" }, { - "label": "Gráfico de Barras" + "label":"Gráfico de Barras" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "Texto leído por Lectores de texto en voz alta definiendo la figura como un gráfico.", "default": "Gráfico" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/es.json b/language/es.json index 9284b05..3e26295 100644 --- a/language/es.json +++ b/language/es.json @@ -7,7 +7,13 @@ "label": "Gráfico de Pastel" }, { - "label": "Gráfico de Barras" + "label":"Gráfico de Barras" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "Texto leído por Lectores de texto en voz alta definiendo la figura como un gráfico.", "default": "Gráfico" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/et.json b/language/et.json index 05dd742..5e8405b 100644 --- a/language/et.json +++ b/language/et.json @@ -8,6 +8,12 @@ }, { "label": "Tulpjoonis" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "Tekstilugeri loetud tekst, mis määratleb pildi arvjoonisena.", "default": "Arvjoonis" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/eu.json b/language/eu.json index 60cdd9d..51359cb 100644 --- a/language/eu.json +++ b/language/eu.json @@ -8,6 +8,12 @@ }, { "label": "Barra-diagrama" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "Irakurtzen duen bozgorailuak irudia diagrama bezala definitzen duen testua.", "default": "Diagrama" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/fi.json b/language/fi.json index 090d9cc..b37afbe 100644 --- a/language/fi.json +++ b/language/fi.json @@ -8,6 +8,12 @@ }, { "label": "Pylväs" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "Ruudunlukijan teksti kaaviolle.", "default": "Kaavio" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/fr.json b/language/fr.json index c1571eb..b0a735d 100644 --- a/language/fr.json +++ b/language/fr.json @@ -8,6 +8,12 @@ }, { "label": "Graphique en barres" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "Texte lu par l'orateur (readspeaker) et qui définit la figure comme étant un graphique.", "default": "Graphique" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/gl.json b/language/gl.json index 1975980..714097f 100644 --- a/language/gl.json +++ b/language/gl.json @@ -8,6 +8,12 @@ }, { "label": "Gráfico de barras" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "Texto lido polo lector de pantalla definindo a figura como gráfico.", "default": "Gráfico" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/he.json b/language/he.json index 3e07f70..c8dbd63 100644 --- a/language/he.json +++ b/language/he.json @@ -8,6 +8,12 @@ }, { "label": "גרף עמודות" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "תאור המוקרא על ידי קורא־מסך יקריא את הרכיב כגרף.", "default": "גרף" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/it.json b/language/it.json index 91302d7..9842cb8 100644 --- a/language/it.json +++ b/language/it.json @@ -8,6 +8,12 @@ }, { "label": "Grafico a barre" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "Testo letto da un lettore vocale che descrive la figura come un grafico", "default": "Grafico" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/ja.json b/language/ja.json index f3e0502..94d1958 100644 --- a/language/ja.json +++ b/language/ja.json @@ -8,6 +8,12 @@ }, { "label":"棒グラフ" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -33,8 +39,59 @@ } }, { - "label": "Text read by readspeakers defining the figure as a chart.", + "label": "Text read by screen readers defining the figure as a chart.", "default": "Chart" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/km.json b/language/km.json index 0871cf8..0df7dba 100644 --- a/language/km.json +++ b/language/km.json @@ -9,6 +9,12 @@ }, { "label": "Bar Chart" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -34,8 +40,59 @@ } }, { - "label": "Text read by readspeakers defining the figure as a chart.", + "label": "Text read by screen readers defining the figure as a chart.", "default": "ក្រាប" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/ko.json b/language/ko.json index 9c4038e..8e2a2cd 100644 --- a/language/ko.json +++ b/language/ko.json @@ -8,6 +8,12 @@ }, { "label": "막대 차트" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "차트를 그림으로 정의하는 자동 읽어주기 기능이 읽는 텍스트", "default": "차트" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/nb.json b/language/nb.json index 3ea20af..7522c20 100644 --- a/language/nb.json +++ b/language/nb.json @@ -7,34 +7,91 @@ "label":"Kakediagram" }, { - "label":"Søylediagram" + "label": "Søylediagram" + }, + { + "label": "Utvidet søylediagram" + }, + { + "label": "Linjediagram" } ] }, { - "label":"Verdier", - "entity":"verdi", - "field":{ - "label":"Verdi", - "fields":[ + "label": "Verdier", + "entity": "option", + "field": { + "label": "Verdi", + "fields": [ { - "label":"Navn" + "label": "Navn" }, { - "label":"Verdi" + "label": "Verdi" }, { - "label":"Bakgrunnsfarge" + "label": "Farge" }, { - "label":"Tekstfarge" + "label": "Tekstfarge" } ] } }, { - "label": "Tekst lest av readspeakers (som definerer figuren som et diagram).", + "label": "Tekst lest av screen readers (som definerer figuren som et diagram).", "default": "Diagram" + }, + { + "label": "Graftittel", + "description" : "Tittelen på grafen, blir lagt til i toppen." + }, + { + "label": "X aksetittel", + "description" : "En tittel i bunnen av grafen til å beskrive X aksen." + }, + { + "label": "Y aksetittel", + "description" : "En tittel til venstre av grafen til å beskrive Y aksen." + }, + { + "label": "Overstyr farger", + "fields": [ + { + "label": "Overstyr diagramfarge", + "description": "Kryss av for å overstyre fargene i diagrammet" + }, + { + "label": "Overstyringsfarge for søyler", + "description": "Overstyrer søylefargene med valgt farge" + }, + { + "label": "Overstyringsfarge for tekst i søyler", + "description": "Overstyrer fargen i teksten inni søylene" + } + ] + }, + { + "label": "Farge på linje", + "fields": [ + { + "label": "Fargen på linjen i linjediagrammet" + } + ] + }, + { + "label": "Verdier", + "field": { + "label": "Verdi", + "fields": [ + { + "label": "X Verdi" + }, + { + "label": "Y Verdi" + } + ] + } } ] } diff --git a/language/nl.json b/language/nl.json index 87f69fe..2558c68 100644 --- a/language/nl.json +++ b/language/nl.json @@ -8,6 +8,12 @@ }, { "label": "Staafdiagram" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "Tekst gelezen door readsprekers die het figuur als een grafiek definiëren.", "default": "Grafiek" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/nn.json b/language/nn.json index e2dec99..5e15e37 100644 --- a/language/nn.json +++ b/language/nn.json @@ -7,34 +7,91 @@ "label":"Kakediagram" }, { - "label":"Søylediagram" + "label": "Søylediagram" + }, + { + "label": "Utvida søylediagram" + }, + { + "label": "Linjediagram" } ] }, { - "label":"Verdiar", - "entity":"verdi", - "field":{ - "label":"Verdi", - "fields":[ + "label": "Verdiar", + "entity": "option", + "field": { + "label": "Verdi", + "fields": [ { - "label":"Namn" + "label": "Navn" }, { - "label":"Verdi" + "label": "Verdi" }, { - "label":"Bakgrunnsfarge" + "label": "Farge" }, { - "label":"Tekstfarge" + "label": "Tekstfarge" } ] } }, { - "label": "Text read by readspeakers defining the figure as a chart.", + "label": "Tekst lest av screen readers (som definerer figuren som eit diagram).", "default": "Diagram" + }, + { + "label": "Graftittel", + "description" : "Tittelen på grafen, blir lagt til i toppen." + }, + { + "label": "X aksetittel", + "description" : "Ein tittel i bunnen av grafen til å beskrive X aksen." + }, + { + "label": "Y aksetittel", + "description" : "Ein tittel til venstre av grafen til å beskrive Y aksen." + }, + { + "label": "Overstyr fargar", + "fields": [ + { + "label": "Overstyr diagramfarge", + "description": "Kryss av for å overstyre fargane i diagrammet" + }, + { + "label": "Overstyringsfarge for søyler", + "description": "Overstyrer søylefargane med valgt farge" + }, + { + "label": "Overstyringsfarge for tekst i søyler", + "description": "Overstyrer fargen i teksten inni søylene" + } + ] + }, + { + "label": "Farge på linje", + "fields": [ + { + "label": "Fargen på linjen i linjediagrammet" + } + ] + }, + { + "label": "Verdiar", + "field": { + "label": "Verdi", + "fields": [ + { + "label": "X Verdi" + }, + { + "label": "Y Verdi" + } + ] + } } ] } diff --git a/language/pt-br.json b/language/pt-br.json index 02d4e07..b1e796a 100644 --- a/language/pt-br.json +++ b/language/pt-br.json @@ -8,14 +8,20 @@ }, { "label": "Gráfico de barras" + }, + { + "label": "Gráfico de barras aumentado" + }, + { + "label": "Gráfico de linha" } ] }, { - "label": "Dados", + "label": "Elemento de dados", "entity": "option", "field": { - "label": "Dados", + "label": "Elemento de dado", "fields": [ { "label": "Nome" @@ -35,6 +41,57 @@ { "label": "Texto lido por leitores de tela definindo a figura como um gráfico.", "default": "Gráfico" + }, + { + "label": "Título do gráfico", + "description" : "Adiciona um título acima de gráfico." + }, + { + "label": "Título do eixo X", + "description" : "Um título sob o gráfico para descrever o eixo X" + }, + { + "label": "Título do eixo X", + "description" : "Um título sob o gráfico para descrever o eixo Y" + }, + { + "label": "Substituir cores", + "fields": [ + { + "label": "Substituir as cores do gráfico", + "description": "Se marcado, as cores selecionadas serão usadas como cor do elemento de dados em todas as barras e textos." + }, + { + "label": "Substituir a cor do gráfico", + "description": "Define uma nova cor para todas os barras. Substitui as cores individuais nos elementos de dados" + }, + { + "label": "Substituir a cor do texto do gráfico", + "description": "Define uma nova cor para todos os textos nas barras." + } + ] + }, + { + "label": "Cor da linha", + "fields": [ + { + "label": "Cor da linha no gráfico" + } + ] + }, + { + "label": "Dados de elementos", + "field": { + "label": "Elemento de dado", + "fields": [ + { + "label": "Valor X" + }, + { + "label": "Valor Y" + } + ] + } } ] } diff --git a/language/pt.json b/language/pt.json index aac7408..fb3c064 100644 --- a/language/pt.json +++ b/language/pt.json @@ -8,6 +8,12 @@ }, { "label": "Gráfico de barras" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "Texto lido por leitores de ecrã definindo a figura como um gráfico.", "default": "Gráfico" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/ru.json b/language/ru.json index d96479c..6c21e23 100644 --- a/language/ru.json +++ b/language/ru.json @@ -8,6 +8,12 @@ }, { "label": "Гистограмма" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "Текст, обработанный ассистирующими технологиями определяет фигуру как диаграмму.", "default": "Таблица, диаграмма" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/sl.json b/language/sl.json index 354f150..37ea934 100644 --- a/language/sl.json +++ b/language/sl.json @@ -8,6 +8,12 @@ }, { "label": "Stolpični" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "Besedilo za opis grafikona za bralnike zaslona", "default": "Grafikon" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/sma.json b/language/sma.json index 4c215f9..9d6cf9b 100644 --- a/language/sma.json +++ b/language/sma.json @@ -8,6 +8,12 @@ }, { "label": "Bar Chart" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -33,8 +39,59 @@ } }, { - "label": "Text read by readspeakers defining the figure as a chart.", + "label": "Text read by screen readers defining the figure as a chart.", "default": "Chart" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/sme.json b/language/sme.json index 4c215f9..9d6cf9b 100644 --- a/language/sme.json +++ b/language/sme.json @@ -8,6 +8,12 @@ }, { "label": "Bar Chart" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -33,8 +39,59 @@ } }, { - "label": "Text read by readspeakers defining the figure as a chart.", + "label": "Text read by screen readers defining the figure as a chart.", "default": "Chart" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/smj.json b/language/smj.json index 4c215f9..9d6cf9b 100644 --- a/language/smj.json +++ b/language/smj.json @@ -8,6 +8,12 @@ }, { "label": "Bar Chart" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -33,8 +39,59 @@ } }, { - "label": "Text read by readspeakers defining the figure as a chart.", + "label": "Text read by screen readers defining the figure as a chart.", "default": "Chart" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/sv.json b/language/sv.json index e95f40c..730d6aa 100644 --- a/language/sv.json +++ b/language/sv.json @@ -8,6 +8,12 @@ }, { "label": "Stapeldiagram" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "Text som läses av skärmläsare som definierar figuren som ett diagram.", "default": "Diagram" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/zh-hans.json b/language/zh-hans.json index 7c15dfe..dc573ef 100644 --- a/language/zh-hans.json +++ b/language/zh-hans.json @@ -8,6 +8,12 @@ }, { "label": "直方图" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "报读器文本", "default": "图表" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/zh-tw.json b/language/zh-tw.json index 33bb1e0..1bcbd62 100644 --- a/language/zh-tw.json +++ b/language/zh-tw.json @@ -8,6 +8,12 @@ }, { "label": "長條圖" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "閱讀器導讀文字-將圖形定義為圖表.", "default": "圖表" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/language/zh.json b/language/zh.json index e0ad399..b006bab 100644 --- a/language/zh.json +++ b/language/zh.json @@ -8,6 +8,12 @@ }, { "label": "直方圖" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -35,6 +41,57 @@ { "label": "報讀器文本", "default": "Chart" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart." + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis." + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis." + }, + { + "label": "Override color controls", + "fields": [ + { + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt." + }, + { + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements" + }, + { + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars." + } + ] + }, + { + "label": "Line color", + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] -} +} \ No newline at end of file diff --git a/library.json b/library.json index 6f3c77d..932508c 100644 --- a/library.json +++ b/library.json @@ -1,13 +1,13 @@ { - "title": "Chart", + "title": "Chart (NDLA)", "description": "Create different charts", "majorVersion": 1, "minorVersion": 2, - "patchVersion": 18, + "patchVersion": 25, "runnable": 1, "author": "Joubel", "license": "MIT", - "machineName": "H5P.Chart", + "machineName": "H5P.NDLAChart", "coreApi": { "majorVersion": 1, "minorVersion": 21 @@ -32,13 +32,23 @@ }, { "path": "bar.js" + }, + { + "path": "extendedBar.js" + }, + { + "path": "line.js" } ], "editorDependencies": [ { "machineName": "H5PEditor.ColorSelector", "majorVersion": 1, - "minorVersion": 2 + "minorVersion": 3 + }, + { "machineName": "H5PEditor.ShowWhen", + "majorVersion": 1, + "minorVersion": 0 } ] -} \ No newline at end of file +} diff --git a/line.js b/line.js new file mode 100644 index 0000000..9abd6bb --- /dev/null +++ b/line.js @@ -0,0 +1,309 @@ +/*global d3*/ + + +H5P.NDLAChart.LineChart = (function () { + + /** + * Creates a line chart from the given data set. + * + * Notice: LineChart uses its own listOfTypes in h5p-chart/semantics.json, its differentiated through the use of "showWhen"-widget + * @class + * @param {Object} params from semantics, contains data set + * @param {H5P.jQuery} $wrapper + */ + function LineChart(params, $wrapper) { + var self = this; + var dataSet = params.listOfTypes; + //Lets check if the axes titles are defined, used for setting correct offset for title space in the generated svg + var chartTextDefined = !!params.chartText; + var isXAxisTextDefined = !!params.xAxisText; + var isYAxisTextDefined = !!params.yAxisText; + + // Create scales for bars + var xScale = d3.scale.ordinal() + .domain(d3.range(dataSet.length)); + var yScale = d3.scale.linear() + .domain([0, d3.max(dataSet, function (d) { + return d.value ; + })]); + var x = d3.time.scale(); + var y = d3.scale.linear(); + + var xAxis = d3.svg.axis() + .scale(xScale) + .orient('bottom') + .tickFormat(function (d) { + return dataSet[d % dataSet.length].text; + }); + + var yAxis = d3.svg.axis() + .scale(yScale) + .orient('left'); + // Create SVG element + var isShowingTooltip = false; + + var svg = d3.select($wrapper[0]) + .append('svg') + svg.append('desc').html('chart'); + + // Create x axis + var xAxisG = svg.append('g') + .attr('class', 'x-axis'); + + var yAxisG = svg.append('g') + .attr('class', 'y-axis') + .attr('aria-label', H5P.t()); + + svg.on("mouseleave", function() { + if(isShowingTooltip) { + onCircleExit(); + } + }); + var ariaChartText = chartTextDefined ? params.chartText : ""; + var ariaXaxisText = isXAxisTextDefined ? params.xAxisText : ""; + var ariaYaxisText = isYAxisTextDefined ? params.yAxisText : ""; + /** + * @private + */ + var key = function (d) { + return dataSet.indexOf(d); + }; + var chartText = svg.append('text') + .style('text-anchor', 'middle') + .attr('class', 'chart-title') + .text(params.chartText); + + var xAxisTitle = svg.append('text') + .style('text-anchor', 'middle') + .attr('aria-label', 'X axis title: ' + params.xAxisText) + .attr('class', 'axis-title') + .text(params.xAxisText); + + var yAxisTitle = svg.append('text') + .style('transform', 'rotate(90deg)') + .attr('aria-label', 'Y axis title: ' + params.yAxisText) + .attr('class', 'axis-title') + .text(params.yAxisText); + + var lineGroup = svg.append("g"); //Used for creating a container for the lines + var path = lineGroup.selectAll("path") + .data([dataSet]) + .enter() + .append("path"); + var circeRadius = 7; + var dots = lineGroup.selectAll("circle") + .data(dataSet, key) + .enter() + .append("circle") + .attr("r", circeRadius) + .attr("tabindex", 0) + .attr('focusable', 'true') + .attr("aria-label", (data) => "Y axis: " + ariaYaxisText + ": " + data.value + + ", X axis: " + ariaXaxisText + ": " + data.text) + .style("fill", params.lineColorGroup) + .on("keyup", function(d,i) { + if(d3.event.keyCode === 9 && isShowingTooltip ){ + onCircleExit(this); + } + if(d3.event.keyCode === 9 && !isShowingTooltip){ + onCircleEnter(d,i, this); + } + }) + + .on("mouseover", function(d, i) { + d3.select(this).transition().duration(200) + .attr("r", circeRadius * 1.25); + if(isShowingTooltip) { + onCircleExit(this); + onCircleEnter(d,i, this); + } else + { + onCircleEnter(d,i, this); + } + }) + + .on("mouseout", function(d) { // Animates exit animation for hover exit + d3.select(this).transition().duration(200) + .attr("r", circeRadius); + }); + + function onCircleEnter(d,i, thisCircle) { + + var rectWidth = 20; + var rectHeight = 20; + var group = lineGroup.append("g") + .attr("class", "text-group") + + + var rect = group.append("rect") + .attr("width", function() { return rectWidth;}) + .attr("height", function() { return rectHeight;}) + .attr("x", function() { return 0;}) + .attr("y", function() { return 0;}) + + .attr("rx", function() { return 2;}) + .attr("id", "value-" + i) + .attr("class", "text-rect"); + + var text = group.append("text") + .attr("class", "text-node") + .text(function() { return d.value;}); + var textWidth = text[0][0].getBoundingClientRect().width; + var textHeight = text[0][0].getBoundingClientRect().height; + console.log(textHeight) + rectWidth = rectWidth + textWidth; + rectHeight = rectHeight / 2 + textHeight; + + rect.attr("width", function() { return rectWidth;}) + rect.attr("height", function() { return rectHeight;}) + .transition().duration(200) + group.attr('transform', 'translate (' + (xScale(i) - (rectWidth / 2)) + ',' + (yScale(d.value) - (rectHeight * 1.33)) + ')'); + + text + .attr("x", function() { return (rectWidth - textWidth) / 2 ;}) + .attr("y", function() { return rectHeight/2;}) + .attr("id", "value-" + i) + .text(function() { return d.value;}); + + console.log((rectWidth - textWidth)) + isShowingTooltip = true; + + } + + function onCircleExit() { + // Deleting extra elements + d3.selectAll(".text-group").remove(); + isShowingTooltip = false; + } + + + + var line = d3.svg.line(); + + /** + * Fit the current bar chart to the size of the wrapper. + */ + self.resize = function () { + // Always scale to available space + var style = window.getComputedStyle($wrapper[0]); + var horizontalPadding = parseFloat(style.width) / 16; + var verticalPadding = Math.max(parseFloat(style.height) / 16, 20); + var width = parseFloat(style.width) - horizontalPadding ; + var h = parseFloat(style.height) - verticalPadding; + var fontSize = parseFloat(style.fontSize); + var lineHeight = (1.25 * fontSize); + var xTickSize = (fontSize * 0.125); + var xAxisRectOffset = lineHeight * 3; + //If chart title doesnt exist, we still make an offset + var chartTitleTextHeight = chartTextDefined ? svg.select('.chart-title')[0][0].getBoundingClientRect().height : 40; + var chartTitleTextOffset = chartTitleTextHeight + lineHeight * 2; // Takes the height of the text element and adds line height, so we always have som space under the title + var height = h - xTickSize - (lineHeight * 2) - chartTitleTextOffset; // Add space for labels below, and also the chart title + //if xAxisTitle exists, them make room for it by adding more lineheight + if(isXAxisTextDefined) { + height = h - xTickSize - (lineHeight * 4) - chartTitleTextOffset; + } + // Update SVG size + svg.attr('viewBox', `0 0 ${width + horizontalPadding} ${h + verticalPadding}`); + + // Update scales + xScale.rangeRoundBands([0, width - xAxisRectOffset], 0.05); //In order for the X scale to NOT overlap Y axis ticks, we define and offset, making the X scale start further away from the svg wrapper edge + yScale.range([height, 0]); //Unlike in 'bar.js', we have 'flipped' the chart, making origo to be in top left corner of chart. This is due to the nature of the Y axis ticks + + x.range([0, width]); + y.range([height, 0]); + + xAxis.tickSize([0]); + xAxisG.call(xAxis); + + yAxisG.call(yAxis + .tickSize(-width, 0, 0) + .ticks(getSmartTicks(d3.max(dataSet).value).count)); + //Gets all text element from the Y Axis + var yAxisTicksText = yAxisG.selectAll('g.tick text')[0]; + //Gets width of last Y Axis tick text element + var yAxisLastTickWidth = yAxisTicksText[yAxisTicksText.length-1].getBoundingClientRect().width; + var minYAxisGMargin = 20; + var yAxisTitleWidth = yAxisTitle[0][0].getBoundingClientRect().width; + const xTranslation = (isYAxisTextDefined ? yAxisLastTickWidth + yAxisTitleWidth + minYAxisGMargin : yAxisLastTickWidth + lineHeight ); + const yTranslation = chartTitleTextOffset; + + xAxisG.attr('transform', `translate(${xTranslation + minYAxisGMargin}, ${lineHeight/2})`); + yAxisG + .attr('transform', `translate(${xTranslation}, ${yTranslation})`); + //Sets the axes titles on resize + chartText + .attr('x', width/2 ) + .attr('y', lineHeight); + + xAxisTitle + .attr('x', width/2 ) + .attr('y', h-2); + yAxisTitle + .attr('x', height/2) + .attr('y', 0); + var xAxisGTexts = svg.selectAll('g.x-axis g.tick'); + + xAxisGTexts.attr('transform', function(d, i) { + var x; + var y = chartTitleTextOffset; + x = xScale(i); + y += height; + return 'translate (' + x + ', ' + y +')'; + + }); + + var lineXPos = xTranslation + minYAxisGMargin; + lineGroup.attr('transform', 'translate(' + lineXPos + ',' + chartTitleTextOffset + ')'); + + //Apply line positions after the scales have changed on resize + line.x(function(d,i) {return xScale(i);}) + .y(function(d) { return yScale(d.value); }); + + //apply lines after resize + path.attr("class", "line-path") + .attr("d", line) + .style("stroke", params.lineColorGroup); + //Move dots according to scale + dots.attr("cx", function(d,i) { return xScale(i);}) + .attr("cy", function(d) { return yScale(d.value); }); + + + // Hide ticks from screen readers, the entire rectangle is already labelled + xAxisG.selectAll('text').attr('aria-hidden', true); + + svg.attr("aria-label", "Line chart, title: " + ariaChartText + + ", X axis title: " + ariaXaxisText + ", Y axis text: " + ariaYaxisText); + + }; + } + + /** + * Calculates number of ticks based on an array of numbers + * @param val + * @returns {{endPoint: number, count: number}} + */ + function getSmartTicks(val) { + + //base step between nearby two ticks + var step = Math.pow(10, val.toString().length - 1); + + //modify steps either: 1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 2000... + if (val / step < 2) { + step = step / 5; + } else if (val / step < 5) { + step = step / 2; + } + + //add one more step if the last tick value is the same as the max value + //if you don't want to add, remove '+1' + var slicesCount = Math.ceil((val + 1) / step); + + return { + endPoint: slicesCount * step, + count: Math.min(10, slicesCount) //show max 10 ticks + }; + + } + + return LineChart; +})(); diff --git a/pie.js b/pie.js index 068d27d..09b4842 100644 --- a/pie.js +++ b/pie.js @@ -1,5 +1,5 @@ /*global d3*/ -H5P.Chart.PieChart = (function () { +H5P.NDLAChart.PieChart = (function () { /** * Creates a pie chart from the given data set. @@ -74,8 +74,7 @@ H5P.Chart.PieChart = (function () { .innerRadius(0); // Update positions - svg.attr('width', width + 'px') - .attr('height', height + 'px'); + svg.attr('viewBox', `0 0 ${width} ${height}`); translater.attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")"); paths.attr("d", arc); texts.attr("transform", function(d) { diff --git a/semantics.json b/semantics.json index cceb782..9ddc193 100644 --- a/semantics.json +++ b/semantics.json @@ -12,6 +12,14 @@ { "value": "barChart", "label": "Bar Chart" + }, + { + "value": "extendedBarChart", + "label": "Extended Bar Chart" + }, + { + "value": "lineChart", + "label": "Line Chart" } ], "default": "pieChart" @@ -24,6 +32,19 @@ "entity": "option", "min": 1, "defaultNum": 2, + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "barChart", + "pieChart" + ] + } + ] + }, "field": { "name": "type", "type": "group", @@ -54,8 +75,13 @@ "default": "#000", "optional": true, "spectrum": { - "showInput": true, - "preferredFormat": "hex" + "showPalette": true, + "palette": [ + ["#1d5cff", "black", "white", "gray"], + ["red", "blue", "yellow", "green"], + ["pink", "purple", "brown", "orange"], + ["lime", "violet", "magenta", "cyan"] + ] } }, { @@ -64,11 +90,16 @@ "widget": "colorSelector", "label": "Font Color", "importance": "low", - "default": "#fff", + "default": "#ffffff", "optional": true, "spectrum": { - "showInput": true, - "preferredFormat": "hex" + "showPalette": true, + "palette": [ + ["#1d5cff", "black", "white", "gray"], + ["red", "blue", "yellow", "green"], + ["pink", "purple", "brown", "orange"], + ["lime", "violet", "magenta", "cyan"] + ] } } ] @@ -77,9 +108,216 @@ { "name": "figureDefinition", "type": "text", - "label": "Text read by readspeakers defining the figure as a chart.", + "label": "Text read by screen readers defining the figure as a chart.", "importance": "low", "default": "Chart", "common": true + }, + { + "name": "chartText", + "type": "text", + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "optional": true, + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "name": "xAxisText", + "type": "text", + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "optional": true, + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "name": "yAxisText", + "type": "text", + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "optional": true, + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "name": "overrideColorGroup", + "type": "group", + "label": "Override color controls", + "importance": "high", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "fields": [ + { + "name": "overrideChartColorsTick", + "type": "boolean", + "label": "Override the chart color ", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt.", + "importance": "low", + "default": false + }, + { + "name": "overrideChartColor", + "type": "text", + "widget": "colorSelector", + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements", + "importance": "low", + "default": "#000", + + "optional": true, + "spectrum": { + "showPalette": true, + "palette": [ + ["#1d5cff", "black", "white", "gray"], + ["red", "blue", "yellow", "green"], + ["pink", "purple", "brown", "orange"], + ["lime", "violet", "magenta", "cyan"] + ] + } + }, + { + "name": "overrideChartColorText", + "type": "text", + "widget": "colorSelector", + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars.", + "importance": "low", + "default": "#ffffff", + + "optional": true, + "spectrum": { + "showPalette": true, + "palette": [ + ["#1d5cff", "black", "white", "gray"], + ["red", "blue", "yellow", "green"], + ["pink", "purple", "brown", "orange"], + ["lime", "violet", "magenta", "cyan"] + ] + } + } + ] + }, + { + "name": "lineColorGroup", + "type": "group", + "label": "Line color", + "importance": "high", + "widget": "showWhen", + "default": "#000000", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "name": "lineColor", + "type": "text", + "widget": "colorSelector", + "label": "Color of the line in the chart", + "importance": "low", + "optional": true, + "spectrum": { + "showPalette": true, + "palette": [ + ["#1d5cff", "black", "white", "gray"], + ["red", "blue", "yellow", "green"], + ["pink", "purple", "brown", "orange"], + ["lime", "violet", "magenta", "cyan"] + ] + } + } + ] + }, + + + + { + "name": "listOfTypes", + "type": "list", + "label": "Data elements", + "importance": "high", + "entity": "option", + "min": 1, + "defaultNum": 2, + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "name": "type", + "type": "group", + "label": "Data element", + "importance": "high", + "fields": [ + { + "name": "text", + "type": "text", + "label": "X Value", + "importance": "medium" + }, + { + "name": "value", + "type": "number", + "label": "Y Value", + "importance": "low", + "default": 1, + "min": 0.0001, + "decimals": 4 + } + ] + } } ] diff --git a/upgrades.js b/upgrades.js index 7fb037e..d146666 100644 --- a/upgrades.js +++ b/upgrades.js @@ -1,6 +1,6 @@ var H5PUpgrades = H5PUpgrades || {}; -H5PUpgrades['H5P.Chart'] = (function () { +H5PUpgrades['H5P.NDLAChart'] = (function () { return { 1: {