From 2766181f944c5cdc7a88b722c6606926489c30e2 Mon Sep 17 00:00:00 2001 From: eddiman Date: Fri, 5 Feb 2021 15:01:57 +0100 Subject: [PATCH 01/45] added new type of chart, added support for axes title in extendedBarChart --- chart.css | 2 +- chart.js | 25 +++++++- extendedBar.js | 168 +++++++++++++++++++++++++++++++++++++++++++++++++ library.json | 5 +- semantics.json | 17 +++++ 5 files changed, 212 insertions(+), 5 deletions(-) create mode 100644 extendedBar.js diff --git a/chart.css b/chart.css index bdd97f47..ee35b301 100644 --- a/chart.css +++ b/chart.css @@ -23,7 +23,7 @@ height: 25em; } -.h5p-chart .hidden-but-read { +.h5p-chart .hidden-but-read {> position:absolute; left:-10000px; top:auto; diff --git a/chart.js b/chart.js index 3371e921..d0080d50 100644 --- a/chart.js +++ b/chart.js @@ -22,6 +22,7 @@ H5P.Chart = (function ($, EventDispatcher) { // Set params and filter data set to make sure it's valid self.params = params; + console.log(self.params); if (self.params.listOfTypes) { Chart.filterData(self.params.listOfTypes); } @@ -34,8 +35,8 @@ H5P.Chart = (function ($, EventDispatcher) { self.params.listOfTypes = [ { text: 'Cat', - value: 1, - color: '#D3D3D3', + value: 4, + color: '#fbb033', fontColor: '#000' }, { @@ -59,9 +60,27 @@ H5P.Chart = (function ($, EventDispatcher) { } // Keep track of type. - self.type = (self.params.graphMode === 'pieChart' ? 'Pie' : 'Bar'); + //self.type = (self.params.graphMode === 'pieChart' ? 'Pie' : 'Bar'); + self.type = getChartType(self.params.graphMode); + console.log("self"); + console.log(self); } + function getChartType(graphMode) { + switch (graphMode) { + case 'pieChart': + return 'Pie'; + + case 'barChart': + return 'Bar'; + + case 'extendedBarChart': + return 'ExtendedBar'; + + default: + return 'Pie'; + } + } // Inheritance Chart.prototype = Object.create(EventDispatcher.prototype); Chart.prototype.constructor = Chart; diff --git a/extendedBar.js b/extendedBar.js new file mode 100644 index 00000000..700899a4 --- /dev/null +++ b/extendedBar.js @@ -0,0 +1,168 @@ +/*global d3*/ +H5P.Chart.ExtendedBarChart = (function () { + + /** + * Creates a bar chart from the given data set. + * + * @class + * @param {array} 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 isXAxisDefined = !!params.xAxisText; + var isYAxisDefined = !!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; + }); + + // Create SVG element + 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"); + + /** + * @private + */ + var key = function (d) { + return dataSet.indexOf(d); + }; + + // Create rectangles for bars + var rects = svg.selectAll("rect") + .data(dataSet, key) + .enter() + .append("rect") + .attr("fill", function(d) { + if (d.color !== undefined) { + return d.color; + } + return defColors(dataSet.indexOf(d) % 7); + }); + + var xAxisTitle = svg.append("text") + .style("text-anchor", "middle") + .text(params.xAxisText); + + var yAxisTitle = svg.append("text") + .style("transform", "rotate(90deg)") + .text(params.AxisText); + + // Create labels + var texts = svg.selectAll("text") + .data(dataSet, key) + .enter() + .append("text") + .text(function(d) { + return d.value; + }) + .attr("text-anchor", "middle") + .attr("fill", function (d) { + 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 width = parseFloat(style.width); + var h = parseFloat(style.height); + var fontSize = parseFloat(style.fontSize); + var lineHeight = (1.25 * fontSize); + var tickSize = (fontSize * 0.125); + + var height = h - tickSize - (lineHeight); // Add space for labels below + + //if xAxisTitle exists, them make room for it by adding more lineheight + if(isXAxisDefined) { + height = h - tickSize - (lineHeight * 2); + } + + // Update SVG size + svg.attr("width", width) + .attr("height", h); + + // Update scales + xScale.rangeRoundBands([0, width], 0.05); + yScale.range([0, height]); + + x.range([0, width]); + y.range([height, 0]); + + xAxis.tickSize([tickSize]); + isYAxisDefined ? + //Making space for Y Axis title by adding the lineheight to underline + xAxisG.attr("transform", "translate("+ lineHeight + "," + height + ")").call(xAxis) : + xAxisG.attr("transform", "translate(0," + height + ")").call(xAxis); + + + // Move rectangles (bars) + rects.attr("x", function(d, i) { + //if Y Axis title is defined lets make space for Y Axis title by adding the lineheight to each bar position + if(isYAxisDefined) { + return xScale(i) + lineHeight; + } else { + return xScale(i); + } + }).attr("y", function(d) { + return height - yScale(d.value); + }).attr("width", xScale.rangeBand()) + .attr("height", function(d) { + return yScale(d.value); + }); + + //Sets the axes titles on resize + xAxisTitle + .attr("x", width/2 ) + .attr("y", h); + yAxisTitle + .attr("x", height/2) + .attr("y", 0); + console.log(params); + // Re-locate text value labels + texts.attr("x", function(d, i) { + return xScale(i) + xScale.rangeBand() / 2; + }).attr("y", function(d) { + return height - yScale(d.value) + lineHeight; + }); + + + // Hide ticks from readspeakers, the entire rectangle is already labelled + xAxisG.selectAll("text").attr("aria-hidden", true); + }; + } + + return extendedBarChart; +})(); diff --git a/library.json b/library.json index 6f3c77d3..9ba8261a 100644 --- a/library.json +++ b/library.json @@ -32,6 +32,9 @@ }, { "path": "bar.js" + }, + { + "path": "extendedBar.js" } ], "editorDependencies": [ @@ -41,4 +44,4 @@ "minorVersion": 2 } ] -} \ No newline at end of file +} diff --git a/semantics.json b/semantics.json index cceb782a..d47225d8 100644 --- a/semantics.json +++ b/semantics.json @@ -12,9 +12,26 @@ { "value": "barChart", "label": "Bar Chart" + }, + { + "value": "extendedBarChart", + "label": "Extended Bar Chart" } ], "default": "pieChart" + + }, + { + "name": "xAxisText", + "type": "text", + "label": "X Axis Text", + "optional": true + }, + { + "name": "yAxisText", + "type": "text", + "label": "Y Axis Text", + "optional": true }, { "name": "listOfTypes", From 7ebd0472a5ffe37fca016df718e8d75bdedf76fa Mon Sep 17 00:00:00 2001 From: eddiman Date: Tue, 9 Feb 2021 10:14:46 +0100 Subject: [PATCH 02/45] added y axis ticks in extended bar chart, fixed issues with tick and text alignment with bars, added en and nb translation for new fields --- chart.css | 8 +++ extendedBar.js | 133 ++++++++++++++++++++++++++++++++++------------ language/.en.json | 16 ++++++ language/nb.json | 15 +++++- semantics.json | 4 +- 5 files changed, 140 insertions(+), 36 deletions(-) diff --git a/chart.css b/chart.css index ee35b301..51c0e42a 100644 --- a/chart.css +++ b/chart.css @@ -31,3 +31,11 @@ height:1px; overflow:hidden; } + +.y-axis .tick line { + stroke: black; + opacity: 0.4; +} +.y-axis path { + stroke-width: 0; +} diff --git a/extendedBar.js b/extendedBar.js index 700899a4..e40f7c27 100644 --- a/extendedBar.js +++ b/extendedBar.js @@ -15,8 +15,8 @@ H5P.Chart.ExtendedBarChart = (function () { .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 isXAxisDefined = !!params.xAxisText; - var isYAxisDefined = !!params.yAxisText; + var isXAxisTextDefined = !!params.xAxisText; + var isYAxisTextDefined = !!params.yAxisText; // Create scales for bars var xScale = d3.scale.ordinal() @@ -24,9 +24,8 @@ H5P.Chart.ExtendedBarChart = (function () { var yScale = d3.scale.linear() .domain([0, d3.max(dataSet, function (d) { - return d.value; + return d.value ; })]); - var x = d3.time.scale(); var y = d3.scale.linear(); @@ -37,6 +36,9 @@ H5P.Chart.ExtendedBarChart = (function () { 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"); @@ -45,7 +47,11 @@ H5P.Chart.ExtendedBarChart = (function () { // Create x axis var xAxisG = svg.append("g") - .attr("class", "x-axis"); + .attr("class", "x-axis") + var yAxisG = svg.append("g") + .attr("class", "y-axis") + .attr('transform', 'translate(' + (isYAxisTextDefined ? 40 : 10) + ')'); + /** * @private @@ -72,9 +78,14 @@ H5P.Chart.ExtendedBarChart = (function () { var yAxisTitle = svg.append("text") .style("transform", "rotate(90deg)") - .text(params.AxisText); + .text(params.yAxisText); + + // Create inner rect labels + var xAxisGTexts = svg.selectAll("x-axis text") + .data(dataSet, key) + .enter(); - // Create labels + // Create inner rect labels var texts = svg.selectAll("text") .data(dataSet, key) .enter() @@ -101,13 +112,12 @@ H5P.Chart.ExtendedBarChart = (function () { var h = parseFloat(style.height); var fontSize = parseFloat(style.fontSize); var lineHeight = (1.25 * fontSize); - var tickSize = (fontSize * 0.125); - - var height = h - tickSize - (lineHeight); // Add space for labels below - + var xTickSize = (fontSize * 0.125); + var height = h - xTickSize - (lineHeight); // Add space for labels below + var xAxisRectOffset = lineHeight * 3; //if xAxisTitle exists, them make room for it by adding more lineheight - if(isXAxisDefined) { - height = h - tickSize - (lineHeight * 2); + if(isXAxisTextDefined) { + height = h - xTickSize - (lineHeight * 2) ; } // Update SVG size @@ -115,54 +125,111 @@ H5P.Chart.ExtendedBarChart = (function () { .attr("height", h); // Update scales - xScale.rangeRoundBands([0, width], 0.05); - yScale.range([0, height]); + xScale.rangeRoundBands([0, width - xAxisRectOffset], 0.05); + yScale.range([height, 0]); x.range([0, width]); y.range([height, 0]); - - xAxis.tickSize([tickSize]); - isYAxisDefined ? - //Making space for Y Axis title by adding the lineheight to underline - xAxisG.attr("transform", "translate("+ lineHeight + "," + height + ")").call(xAxis) : - xAxisG.attr("transform", "translate(0," + height + ")").call(xAxis); - - + xAxis.tickSize([0]); + xAxisG.attr("transform", "translate(0,0)").call(xAxis); + /* isYAxisTextDefined ? + //Making space for Y Axis title by adding the lineheight to underline + xAxisG.attr("transform", "translate("+ lineHeight * 4 + "," + height + ")").call(xAxis) : + xAxisG.attr("transform", "translate(" + lineHeight * 2 + "," + height + ")").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; // Move rectangles (bars) rects.attr("x", function(d, i) { - //if Y Axis title is defined lets make space for Y Axis title by adding the lineheight to each bar position - if(isYAxisDefined) { - return xScale(i) + lineHeight; + //if Y Axis title is defined lets make space for Y Axis title by adding the lineheight times 2, to each bar position, and the width of the last, and presumably longest, tick text width + if(isYAxisTextDefined) { + return xScale(i) + xAxisRectOffset + yAxisLastTickWidth; } else { - return xScale(i); + return xScale(i) + lineHeight + yAxisLastTickWidth; } }).attr("y", function(d) { - return height - yScale(d.value); + return yScale(d.value); }).attr("width", xScale.rangeBand()) .attr("height", function(d) { - return yScale(d.value); + return height - yScale(d.value) ; }); + //Sets the axes titles on resize + xAxisTitle .attr("x", width/2 ) .attr("y", h); yAxisTitle .attr("x", height/2) .attr("y", 0); - console.log(params); + + var xAxisGTexts = svg.selectAll("g.x-axis g.tick"); + + console.log(xAxisGTexts); + + xAxisGTexts.attr("transform", function(d, i) { + var x; + var y; + if(isYAxisTextDefined) { + x = xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth; + y = height ; + return "translate (" + x + ", " + y +")"; + } + else { + x = xScale(i) + xScale.rangeBand() / 2 + lineHeight + yAxisLastTickWidth; + y = height ; + return "translate (" + x + ", " + y +")"; + } + }); + + // Re-locate text value labels texts.attr("x", function(d, i) { - return xScale(i) + xScale.rangeBand() / 2; + if(isYAxisTextDefined) { + return xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth; } + else { + return xScale(i) + xScale.rangeBand() / 2 + lineHeight + yAxisLastTickWidth; + } }).attr("y", function(d) { - return height - yScale(d.value) + lineHeight; + return height - lineHeight; }); - + console.log(self) // Hide ticks from readspeakers, the entire rectangle is already labelled xAxisG.selectAll("text").attr("aria-hidden", true); }; } + 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 4c215f94..e38ed142 100644 --- a/language/.en.json +++ b/language/.en.json @@ -8,9 +8,25 @@ }, { "label": "Bar Chart" + }, + { + "value": "extendedBarChart", + "label": "Extended Bar Chart" } ] }, + { + "name": "xAxisText", + "type": "text", + "label": "X Axis Title", + "optional": true + }, + { + "name": "yAxisText", + "type": "text", + "label": "Y Axis Title", + "optional": true + }, { "label": "Data elements", "entity": "option", diff --git a/language/nb.json b/language/nb.json index 3ea20af5..37f30176 100644 --- a/language/nb.json +++ b/language/nb.json @@ -7,10 +7,23 @@ "label":"Kakediagram" }, { - "label":"Søylediagram" + "value": "extendedBarChart", + "label": "Utvidet kakediagram" } ] }, + { + "name": "xAxisText", + "type": "text", + "label": "X aksetittel", + "optional": true + }, + { + "name": "yAxisText", + "type": "text", + "label": "Y aksetittel", + "optional": true + }, { "label":"Verdier", "entity":"verdi", diff --git a/semantics.json b/semantics.json index d47225d8..446e70ac 100644 --- a/semantics.json +++ b/semantics.json @@ -24,13 +24,13 @@ { "name": "xAxisText", "type": "text", - "label": "X Axis Text", + "label": "X Axis Title", "optional": true }, { "name": "yAxisText", "type": "text", - "label": "Y Axis Text", + "label": "Y Axis Title", "optional": true }, { From f14990d3757151043f61f58b4e70832462eba8b3 Mon Sep 17 00:00:00 2001 From: eddiman Date: Tue, 9 Feb 2021 11:35:38 +0100 Subject: [PATCH 03/45] removed debug comments and logging, added some code comments --- extendedBar.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/extendedBar.js b/extendedBar.js index e40f7c27..20e4e94e 100644 --- a/extendedBar.js +++ b/extendedBar.js @@ -47,7 +47,8 @@ H5P.Chart.ExtendedBarChart = (function () { // Create x axis var xAxisG = svg.append("g") - .attr("class", "x-axis") + .attr("class", "x-axis"); + var yAxisG = svg.append("g") .attr("class", "y-axis") .attr('transform', 'translate(' + (isYAxisTextDefined ? 40 : 10) + ')'); @@ -173,8 +174,6 @@ H5P.Chart.ExtendedBarChart = (function () { var xAxisGTexts = svg.selectAll("g.x-axis g.tick"); - console.log(xAxisGTexts); - xAxisGTexts.attr("transform", function(d, i) { var x; var y; @@ -202,7 +201,6 @@ H5P.Chart.ExtendedBarChart = (function () { return height - lineHeight; }); - console.log(self) // Hide ticks from readspeakers, the entire rectangle is already labelled xAxisG.selectAll("text").attr("aria-hidden", true); }; From e64335c4b1bfde91d9cb0df24120d1a19c0416f1 Mon Sep 17 00:00:00 2001 From: eddiman Date: Tue, 9 Feb 2021 14:43:57 +0100 Subject: [PATCH 04/45] added support for chart title, addded more var and function comments, removed debug logging in chart.js --- chart.css | 11 +++++++++-- extendedBar.js | 52 +++++++++++++++++++++++++++++++++----------------- semantics.json | 6 ++++++ 3 files changed, 49 insertions(+), 20 deletions(-) diff --git a/chart.css b/chart.css index 51c0e42a..3b047627 100644 --- a/chart.css +++ b/chart.css @@ -32,10 +32,17 @@ overflow:hidden; } -.y-axis .tick line { +.h5p-chart text { +} + +.h5p-chart .chart-title { + font-size: 1.5em; +} + +.h5p-chart .y-axis .tick line { stroke: black; opacity: 0.4; } -.y-axis path { +.h5p-chart .y-axis path { stroke-width: 0; } diff --git a/extendedBar.js b/extendedBar.js index 20e4e94e..5e4270bf 100644 --- a/extendedBar.js +++ b/extendedBar.js @@ -15,6 +15,7 @@ H5P.Chart.ExtendedBarChart = (function () { .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; @@ -51,8 +52,6 @@ H5P.Chart.ExtendedBarChart = (function () { var yAxisG = svg.append("g") .attr("class", "y-axis") - .attr('transform', 'translate(' + (isYAxisTextDefined ? 40 : 10) + ')'); - /** * @private @@ -73,6 +72,11 @@ H5P.Chart.ExtendedBarChart = (function () { 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") .text(params.xAxisText); @@ -114,11 +118,13 @@ H5P.Chart.ExtendedBarChart = (function () { var fontSize = parseFloat(style.fontSize); var lineHeight = (1.25 * fontSize); var xTickSize = (fontSize * 0.125); - var height = h - xTickSize - (lineHeight); // Add space for labels below var xAxisRectOffset = lineHeight * 3; + var chartTitleTextHeight = svg.select(".chart-title")[0][0].getBoundingClientRect().height; + var chartTitleTextOffset = chartTitleTextHeight + lineHeight; // 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) - (chartTextDefined ? chartTitleTextOffset : 0); // 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 * 2) ; + height = h - xTickSize - (lineHeight * 2) - (chartTextDefined ? chartTitleTextOffset : 0); } // Update SVG size @@ -126,18 +132,16 @@ H5P.Chart.ExtendedBarChart = (function () { .attr("height", h); // Update scales - xScale.rangeRoundBands([0, width - xAxisRectOffset], 0.05); - yScale.range([height, 0]); + 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.attr("transform", "translate(0,0)").call(xAxis); - /* isYAxisTextDefined ? - //Making space for Y Axis title by adding the lineheight to underline - xAxisG.attr("transform", "translate("+ lineHeight * 4 + "," + height + ")").call(xAxis) : - xAxisG.attr("transform", "translate(" + lineHeight * 2 + "," + height + ")").call(xAxis); - */ + //A lot of conditional moving here. If Y axis text is defined, we translate 40 px in the X direction. In the Y direction we translate downward the by current chartTitle height and line height + yAxisG + .attr('transform', 'translate(' + (isYAxisTextDefined ? 40 : 10) + ',' + (chartTextDefined ? chartTitleTextOffset : 0) + ')'); yAxisG.call(yAxis .tickSize(-width, 0, 0) @@ -147,6 +151,7 @@ H5P.Chart.ExtendedBarChart = (function () { 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; + // Move rectangles (bars) rects.attr("x", function(d, i) { //if Y Axis title is defined lets make space for Y Axis title by adding the lineheight times 2, to each bar position, and the width of the last, and presumably longest, tick text width @@ -156,14 +161,17 @@ H5P.Chart.ExtendedBarChart = (function () { return xScale(i) + lineHeight + yAxisLastTickWidth; } }).attr("y", function(d) { - return yScale(d.value); + //If chart text is defined, add the height of the svg chart text and the lineheight to offsett the rects on the y + return chartTextDefined ? yScale(d.value) + chartTitleTextOffset : yScale(d.value); }).attr("width", xScale.rangeBand()) .attr("height", function(d) { return height - yScale(d.value) ; }); - //Sets the axes titles on resize + chartText + .attr("x", width/2 ) + .attr("y", lineHeight); xAxisTitle .attr("x", width/2 ) @@ -174,17 +182,18 @@ H5P.Chart.ExtendedBarChart = (function () { var xAxisGTexts = svg.selectAll("g.x-axis g.tick"); + //Used for positioning/translating the X axis ticks to be in the middle of each bar xAxisGTexts.attr("transform", function(d, i) { var x; - var y; + var y = chartTextDefined ? chartTitleTextOffset: 0; if(isYAxisTextDefined) { x = xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth; - y = height ; + y += height; return "translate (" + x + ", " + y +")"; } else { x = xScale(i) + xScale.rangeBand() / 2 + lineHeight + yAxisLastTickWidth; - y = height ; + y += height; return "translate (" + x + ", " + y +")"; } }); @@ -193,12 +202,14 @@ H5P.Chart.ExtendedBarChart = (function () { // Re-locate text value labels texts.attr("x", function(d, i) { if(isYAxisTextDefined) { - return xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth; } + //Offset a bt more if the Y Axis text is defined + return xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth;} else { return xScale(i) + xScale.rangeBand() / 2 + lineHeight + yAxisLastTickWidth; } }).attr("y", function(d) { - return height - lineHeight; + //Add more room with a ternary if chart text is defined + return height - lineHeight + (chartTextDefined ? chartTitleTextOffset : 0); }); // Hide ticks from readspeakers, the entire rectangle is already labelled @@ -206,6 +217,11 @@ H5P.Chart.ExtendedBarChart = (function () { }; } + /** + * 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 diff --git a/semantics.json b/semantics.json index 446e70ac..35bfacf6 100644 --- a/semantics.json +++ b/semantics.json @@ -21,6 +21,12 @@ "default": "pieChart" }, + { + "name": "chartText", + "type": "text", + "label": "Chart Title", + "optional": true + }, { "name": "xAxisText", "type": "text", From a413f3787145f4777438f5c36ecbdd0b2b93aaf1 Mon Sep 17 00:00:00 2001 From: eddiman Date: Tue, 9 Feb 2021 14:45:17 +0100 Subject: [PATCH 05/45] replaced all double quotation with the single quotation mark to be in line with the quotation convention in project --- chart.js | 3 -- extendedBar.js | 98 +++++++++++++++++++++++++------------------------- 2 files changed, 49 insertions(+), 52 deletions(-) diff --git a/chart.js b/chart.js index d0080d50..1d9d5a6f 100644 --- a/chart.js +++ b/chart.js @@ -22,7 +22,6 @@ H5P.Chart = (function ($, EventDispatcher) { // Set params and filter data set to make sure it's valid self.params = params; - console.log(self.params); if (self.params.listOfTypes) { Chart.filterData(self.params.listOfTypes); } @@ -62,8 +61,6 @@ H5P.Chart = (function ($, EventDispatcher) { // Keep track of type. //self.type = (self.params.graphMode === 'pieChart' ? 'Pie' : 'Bar'); self.type = getChartType(self.params.graphMode); - console.log("self"); - console.log(self); } function getChartType(graphMode) { diff --git a/extendedBar.js b/extendedBar.js index 5e4270bf..8887097d 100644 --- a/extendedBar.js +++ b/extendedBar.js @@ -12,7 +12,7 @@ H5P.Chart.ExtendedBarChart = (function () { var self = this; var dataSet = params.listOfTypes; var defColors = d3.scale.ordinal() - .range(["#fbb033", "#2f2f2f", "#FFB6C1", "#B0C4DE", "#D3D3D3", "#20B2AA", "#FAFAD2"]); + .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; @@ -32,26 +32,26 @@ H5P.Chart.ExtendedBarChart = (function () { var xAxis = d3.svg.axis() .scale(xScale) - .orient("bottom") + .orient('bottom') .tickFormat(function (d) { return dataSet[d % dataSet.length].text; }); var yAxis = d3.svg.axis() .scale(yScale) - .orient("left"); + .orient('left'); // Create SVG element var svg = d3.select($wrapper[0]) - .append("svg"); + .append('svg'); - svg.append("desc").html("chart"); + svg.append('desc').html('chart'); // Create x axis - var xAxisG = svg.append("g") - .attr("class", "x-axis"); + var xAxisG = svg.append('g') + .attr('class', 'x-axis'); - var yAxisG = svg.append("g") - .attr("class", "y-axis") + var yAxisG = svg.append('g') + .attr('class', 'y-axis') /** * @private @@ -61,51 +61,51 @@ H5P.Chart.ExtendedBarChart = (function () { }; // Create rectangles for bars - var rects = svg.selectAll("rect") + var rects = svg.selectAll('rect') .data(dataSet, key) .enter() - .append("rect") - .attr("fill", function(d) { + .append('rect') + .attr('fill', function(d) { 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") + 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") + var xAxisTitle = svg.append('text') + .style('text-anchor', 'middle') .text(params.xAxisText); - var yAxisTitle = svg.append("text") - .style("transform", "rotate(90deg)") + var yAxisTitle = svg.append('text') + .style('transform', 'rotate(90deg)') .text(params.yAxisText); // Create inner rect labels - var xAxisGTexts = svg.selectAll("x-axis text") + var xAxisGTexts = svg.selectAll('x-axis text') .data(dataSet, key) .enter(); // Create inner rect labels - var texts = svg.selectAll("text") + var texts = svg.selectAll('text') .data(dataSet, key) .enter() - .append("text") + .append('text') .text(function(d) { return d.value; }) - .attr("text-anchor", "middle") - .attr("fill", function (d) { + .attr('text-anchor', 'middle') + .attr('fill', function (d) { if (d.fontColor !== undefined) { return d.fontColor; } return '000000'; }) - .attr("aria-hidden", true); + .attr('aria-hidden', true); /** * Fit the current bar chart to the size of the wrapper. @@ -119,7 +119,7 @@ H5P.Chart.ExtendedBarChart = (function () { var lineHeight = (1.25 * fontSize); var xTickSize = (fontSize * 0.125); var xAxisRectOffset = lineHeight * 3; - var chartTitleTextHeight = svg.select(".chart-title")[0][0].getBoundingClientRect().height; + var chartTitleTextHeight = svg.select('.chart-title')[0][0].getBoundingClientRect().height; var chartTitleTextOffset = chartTitleTextHeight + lineHeight; // 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) - (chartTextDefined ? chartTitleTextOffset : 0); // Add space for labels below, and also the chart title //if xAxisTitle exists, them make room for it by adding more lineheight @@ -128,17 +128,17 @@ H5P.Chart.ExtendedBarChart = (function () { } // Update SVG size - svg.attr("width", width) - .attr("height", h); + svg.attr('width', width) + .attr('height', h); // 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 + 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.attr("transform", "translate(0,0)").call(xAxis); + xAxisG.attr('transform', 'translate(0,0)').call(xAxis); //A lot of conditional moving here. If Y axis text is defined, we translate 40 px in the X direction. In the Y direction we translate downward the by current chartTitle height and line height yAxisG .attr('transform', 'translate(' + (isYAxisTextDefined ? 40 : 10) + ',' + (chartTextDefined ? chartTitleTextOffset : 0) + ')'); @@ -148,72 +148,72 @@ H5P.Chart.ExtendedBarChart = (function () { .ticks(getSmartTicks(d3.max(dataSet).value).count)); //Gets all text element from the Y Axis - var yAxisTicksText = yAxisG.selectAll("g.tick text")[0]; + 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; // Move rectangles (bars) - rects.attr("x", function(d, i) { + rects.attr('x', function(d, i) { //if Y Axis title is defined lets make space for Y Axis title by adding the lineheight times 2, to each bar position, and the width of the last, and presumably longest, tick text width if(isYAxisTextDefined) { return xScale(i) + xAxisRectOffset + yAxisLastTickWidth; } else { return xScale(i) + lineHeight + yAxisLastTickWidth; } - }).attr("y", function(d) { + }).attr('y', function(d) { //If chart text is defined, add the height of the svg chart text and the lineheight to offsett the rects on the y return chartTextDefined ? yScale(d.value) + chartTitleTextOffset : yScale(d.value); - }).attr("width", xScale.rangeBand()) - .attr("height", function(d) { + }).attr('width', xScale.rangeBand()) + .attr('height', function(d) { return height - yScale(d.value) ; }); //Sets the axes titles on resize chartText - .attr("x", width/2 ) - .attr("y", lineHeight); + .attr('x', width/2 ) + .attr('y', lineHeight); xAxisTitle - .attr("x", width/2 ) - .attr("y", h); + .attr('x', width/2 ) + .attr('y', h); yAxisTitle - .attr("x", height/2) - .attr("y", 0); + .attr('x', height/2) + .attr('y', 0); - var xAxisGTexts = svg.selectAll("g.x-axis g.tick"); + var xAxisGTexts = svg.selectAll('g.x-axis g.tick'); //Used for positioning/translating the X axis ticks to be in the middle of each bar - xAxisGTexts.attr("transform", function(d, i) { + xAxisGTexts.attr('transform', function(d, i) { var x; var y = chartTextDefined ? chartTitleTextOffset: 0; if(isYAxisTextDefined) { x = xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth; y += height; - return "translate (" + x + ", " + y +")"; + return 'translate (' + x + ', ' + y +')'; } else { x = xScale(i) + xScale.rangeBand() / 2 + lineHeight + yAxisLastTickWidth; y += height; - return "translate (" + x + ", " + y +")"; + return 'translate (' + x + ', ' + y +')'; } }); // Re-locate text value labels - texts.attr("x", function(d, i) { + texts.attr('x', function(d, i) { if(isYAxisTextDefined) { //Offset a bt more if the Y Axis text is defined return xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth;} else { return xScale(i) + xScale.rangeBand() / 2 + lineHeight + yAxisLastTickWidth; } - }).attr("y", function(d) { + }).attr('y', function(d) { //Add more room with a ternary if chart text is defined return height - lineHeight + (chartTextDefined ? chartTitleTextOffset : 0); }); // Hide ticks from readspeakers, the entire rectangle is already labelled - xAxisG.selectAll("text").attr("aria-hidden", true); + xAxisG.selectAll('text').attr('aria-hidden', true); }; } @@ -235,7 +235,7 @@ H5P.Chart.ExtendedBarChart = (function () { } //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" + //if you don't want to add, remove '+1' var slicesCount = Math.ceil((val + 1) / step); return { From 748beb4f2e98f5403df57406fa92d749590ba3af Mon Sep 17 00:00:00 2001 From: eddiman Date: Tue, 9 Feb 2021 14:50:51 +0100 Subject: [PATCH 06/45] added language translations to norwegian b --- language/.en.json | 9 +++++++++ language/nb.json | 9 +++++++++ semantics.json | 3 +++ 3 files changed, 21 insertions(+) diff --git a/language/.en.json b/language/.en.json index e38ed142..1bc929c4 100644 --- a/language/.en.json +++ b/language/.en.json @@ -15,16 +15,25 @@ } ] }, + { + "name": "chartText", + "type": "text", + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "optional": true + }, { "name": "xAxisText", "type": "text", "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", "optional": true }, { "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 }, { diff --git a/language/nb.json b/language/nb.json index 37f30176..7c0e94fe 100644 --- a/language/nb.json +++ b/language/nb.json @@ -12,16 +12,25 @@ } ] }, + { + "name": "chartText", + "type": "text", + "label": "Graftittel", + "description" : "Tittelen på grafen, blir lagt til i toppen.", + "optional": true + }, { "name": "xAxisText", "type": "text", "label": "X aksetittel", + "description" : "En tittel i bunnen av grafen til å beskrive X aksen.", "optional": true }, { "name": "yAxisText", "type": "text", "label": "Y aksetittel", + "description" : "En tittel til venstre av grafen til å beskrive Y aksen.", "optional": true }, { diff --git a/semantics.json b/semantics.json index 35bfacf6..4cbef026 100644 --- a/semantics.json +++ b/semantics.json @@ -25,18 +25,21 @@ "name": "chartText", "type": "text", "label": "Chart Title", + "description" : "Adds a title on top of chart.", "optional": true }, { "name": "xAxisText", "type": "text", "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", "optional": true }, { "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 }, { From 89181ab503d41cf1db72402c44f17a43f4f635ca Mon Sep 17 00:00:00 2001 From: eddiman Date: Wed, 10 Feb 2021 10:41:18 +0100 Subject: [PATCH 07/45] fixed minor issues --- chart.css | 2 +- chart.js | 1 - language/nb.json | 5 ++++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/chart.css b/chart.css index 3b047627..cda09a3e 100644 --- a/chart.css +++ b/chart.css @@ -23,7 +23,7 @@ height: 25em; } -.h5p-chart .hidden-but-read {> +.h5p-chart .hidden-but-read { position:absolute; left:-10000px; top:auto; diff --git a/chart.js b/chart.js index 1d9d5a6f..5235d053 100644 --- a/chart.js +++ b/chart.js @@ -59,7 +59,6 @@ H5P.Chart = (function ($, EventDispatcher) { } // Keep track of type. - //self.type = (self.params.graphMode === 'pieChart' ? 'Pie' : 'Bar'); self.type = getChartType(self.params.graphMode); } diff --git a/language/nb.json b/language/nb.json index 7c0e94fe..a532db42 100644 --- a/language/nb.json +++ b/language/nb.json @@ -6,9 +6,12 @@ { "label":"Kakediagram" }, + { + "label": "Søylediagram" + }, { "value": "extendedBarChart", - "label": "Utvidet kakediagram" + "label": "Utvidet søylediagram" } ] }, From 73331ea0c07424e8805e95c43c8361ab511e3d25 Mon Sep 17 00:00:00 2001 From: eddiman Date: Wed, 10 Feb 2021 17:02:57 +0100 Subject: [PATCH 08/45] added support for line chart --- chart.css | 6 ++ chart.js | 3 + library.json | 3 + line.js | 252 +++++++++++++++++++++++++++++++++++++++++++++++++ semantics.json | 4 + 5 files changed, 268 insertions(+) create mode 100644 line.js diff --git a/chart.css b/chart.css index cda09a3e..c23e15d0 100644 --- a/chart.css +++ b/chart.css @@ -35,6 +35,12 @@ .h5p-chart text { } +.h5p-chart .line-path { + fill: none; + stroke: black; + stroke-width: 1.5px; +} + .h5p-chart .chart-title { font-size: 1.5em; } diff --git a/chart.js b/chart.js index 5235d053..41a4a816 100644 --- a/chart.js +++ b/chart.js @@ -73,6 +73,9 @@ H5P.Chart = (function ($, EventDispatcher) { case 'extendedBarChart': return 'ExtendedBar'; + case 'lineChart': + return 'Line'; + default: return 'Pie'; } diff --git a/library.json b/library.json index 9ba8261a..3980a63d 100644 --- a/library.json +++ b/library.json @@ -35,6 +35,9 @@ }, { "path": "extendedBar.js" + }, + { + "path": "line.js" } ], "editorDependencies": [ diff --git a/line.js b/line.js new file mode 100644 index 00000000..534512cb --- /dev/null +++ b/line.js @@ -0,0 +1,252 @@ +/*global d3*/ +H5P.Chart.LineChart = (function () { + + /** + * Creates a bar chart from the given data set. + * + * @class + * @param {array} params from semantics, contains data set + * @param {H5P.jQuery} $wrapper + */ + function LineChart(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; + + // 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'); + + // 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); + }; + + 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') + .text(params.xAxisText); + + var yAxisTitle = svg.append('text') + .style('transform', 'rotate(90deg)') + .text(params.yAxisText); + + // Create inner rect labels + var xAxisGTexts = svg.selectAll('x-axis text') + .data(dataSet, key) + .enter(); + + // Create inner rect labels + var texts = svg.selectAll('text') + .data([dataSet]) + .enter() + .append('text') + .text(function(d) { + return d.value; + }) + .attr('text-anchor', 'middle') + .attr('fill', function (d) { + if (d.fontColor !== undefined) { + return d.fontColor; + } + return '000000'; + }) + .attr('aria-hidden', true); + + var g = svg.append("g"); + var path = g.selectAll("path") + .data([dataSet]) + .enter() + .append("path"); + var dots = g.selectAll("circle") + .data(dataSet, key) + .enter() + .append("circle") + .attr("r", 5) + .style("fill","grey"); + + 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 width = parseFloat(style.width); + var h = parseFloat(style.height); + var fontSize = parseFloat(style.fontSize); + var lineHeight = (1.25 * fontSize); + var xTickSize = (fontSize * 0.125); + var xAxisRectOffset = lineHeight * 3; + var chartTitleTextHeight = svg.select('.chart-title')[0][0].getBoundingClientRect().height; + var chartTitleTextOffset = chartTitleTextHeight + lineHeight; // 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) - (chartTextDefined ? chartTitleTextOffset : 0); // 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 * 2) - (chartTextDefined ? chartTitleTextOffset : 0); + } + // Update SVG size + svg.attr('width', width) + .attr('height', h); + + + // 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.attr('transform', 'translate(0,0)').call(xAxis); + //A lot of conditional moving here. If Y axis text is defined, we translate 40 px in the X direction. In the Y direction we translate downward the by current chartTitle height and line height + yAxisG + .attr('transform', 'translate(' + (isYAxisTextDefined ? 40 : 10) + ',' + (chartTextDefined ? chartTitleTextOffset : 0) + ')'); + + 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; + + //Sets the axes titles on resize + chartText + .attr('x', width/2 ) + .attr('y', lineHeight); + + xAxisTitle + .attr('x', width/2 ) + .attr('y', h); + yAxisTitle + .attr('x', height/2) + .attr('y', 0); + + var xAxisGTexts = svg.selectAll('g.x-axis g.tick'); + + //Used for positioning/translating the X axis ticks to be in the middle of each bar + xAxisGTexts.attr('transform', function(d, i) { + var x; + var y = chartTextDefined ? chartTitleTextOffset: 0; + if(isYAxisTextDefined) { + x = xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth; + y += height; + return 'translate (' + x + ', ' + y +')'; + } + else { + x = xScale(i) + xScale.rangeBand() / 2 + lineHeight + yAxisLastTickWidth; + y += height; + return 'translate (' + x + ', ' + y +')'; + } + }); + + // Re-locate text value labels + texts.attr('x', function(d, i) { + if(isYAxisTextDefined) { + //Offset a bt more if the Y Axis text is defined + return xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth;} + else { + return xScale(i) + xScale.rangeBand() / 2 + lineHeight + yAxisLastTickWidth; + } + }).attr('y', function(d) { + //Add more room with a ternary if chart text is defined + return height - lineHeight + (chartTextDefined ? chartTitleTextOffset : 0); + }); + + var firstXaxisTick = xAxisG.select('.tick'); + var firstXaxisTickXPos = d3.transform(firstXaxisTick.attr("transform")).translate[0]; + var firstXaxisTickWidth = firstXaxisTick[0][0].getBoundingClientRect().width; + console.log(firstXaxisTickWidth); + g.attr('transform', 'translate(' + (firstXaxisTickXPos - firstXaxisTickWidth )+ ',' + (chartTextDefined ? chartTitleTextOffset : 0) + ')'); + + //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); + + //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 readspeakers, 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 LineChart; +})(); diff --git a/semantics.json b/semantics.json index 4cbef026..dcce8539 100644 --- a/semantics.json +++ b/semantics.json @@ -16,6 +16,10 @@ { "value": "extendedBarChart", "label": "Extended Bar Chart" + }, + { + "value": "lineChart", + "label": "Line Chart" } ], "default": "pieChart" From d560d028be04cbee76656b69eb2fcd79e59691e0 Mon Sep 17 00:00:00 2001 From: eddiman Date: Thu, 11 Feb 2021 17:17:28 +0100 Subject: [PATCH 09/45] added color override support and hover indicator on line chart --- chart.css | 1 - extendedBar.js | 8 +- line.js | 29 ++++++- semantics.json | 200 ++++++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 230 insertions(+), 8 deletions(-) diff --git a/chart.css b/chart.css index c23e15d0..738d0e2d 100644 --- a/chart.css +++ b/chart.css @@ -37,7 +37,6 @@ .h5p-chart .line-path { fill: none; - stroke: black; stroke-width: 1.5px; } diff --git a/extendedBar.js b/extendedBar.js index 8887097d..4b273070 100644 --- a/extendedBar.js +++ b/extendedBar.js @@ -4,6 +4,7 @@ H5P.Chart.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 {array} params from semantics, contains data set * @param {H5P.jQuery} $wrapper @@ -59,13 +60,15 @@ H5P.Chart.ExtendedBarChart = (function () { var key = function (d) { return dataSet.indexOf(d); }; - // Create rectangles for bars var rects = svg.selectAll('rect') .data(dataSet, key) .enter() .append('rect') .attr('fill', function(d) { + if(params.overrideColorGroup && params.overrideColorGroup.overrideChartColorsTick ){ + return params.overrideColorGroup.overrideChartColor; + } if (d.color !== undefined) { return d.color; } @@ -100,6 +103,9 @@ H5P.Chart.ExtendedBarChart = (function () { }) .attr('text-anchor', 'middle') .attr('fill', function (d) { + if(params.overrideColorGroup && params.overrideColorGroup.overrideChartColorsTick ){ + return params.overrideColorGroup.overrideChartColorText; + } if (d.fontColor !== undefined) { return d.fontColor; } diff --git a/line.js b/line.js index 534512cb..bcb1e2f1 100644 --- a/line.js +++ b/line.js @@ -4,6 +4,7 @@ H5P.Chart.LineChart = (function () { /** * Creates a bar 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 {array} params from semantics, contains data set * @param {H5P.jQuery} $wrapper @@ -76,6 +77,8 @@ H5P.Chart.LineChart = (function () { .data(dataSet, key) .enter(); + + //TODO: remove this, not used // Create inner rect labels var texts = svg.selectAll('text') .data([dataSet]) @@ -103,7 +106,25 @@ H5P.Chart.LineChart = (function () { .enter() .append("circle") .attr("r", 5) - .style("fill","grey"); + .style("fill", params.lineColorGroup) + .on("mouseover", function(d, i) { + d3.select(this).transition().duration(200) + .attr("r", 7); + g.append("text") + .attr("x", function() { return xScale(i) - 2;}) + .attr("y", function() { return yScale(d.value) - 20;}) + .text(function() { return d.value;}) + .attr("id", "text_id");}) + .on("mouseout", function(d) { + // Putting style back to default values + d3.select(this).transition().duration(200) + .attr("r", 5) + .style("font-size", 12); + + // Deleting extra elements + d3.select("#text_id").remove(); + + }); var line = d3.svg.line(); @@ -209,11 +230,13 @@ H5P.Chart.LineChart = (function () { //apply lines after resize path.attr("class", "line-path") - .attr("d", line); + .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); }); + .attr("cy", function(d) { return yScale(d.value); }) + // Hide ticks from readspeakers, the entire rectangle is already labelled xAxisG.selectAll('text').attr('aria-hidden', true); diff --git a/semantics.json b/semantics.json index dcce8539..6d93b24d 100644 --- a/semantics.json +++ b/semantics.json @@ -30,22 +30,147 @@ "type": "text", "label": "Chart Title", "description" : "Adds a title on top of chart.", - "optional": true + "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 + "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 + "optional": true, + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + } }, + { + "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 ", + "Described": "If ticked, the color selected will be used as data element color on all bars, and if line chart is selected, define the line color", + "importance": "low", + "default": false + }, + { + "name": "overrideChartColor", + "type": "text", + "widget": "colorSelector", + "label": "overrideColor", + "importance": "low", + "default": "#000", + + "optional": true, + "spectrum": { + "showInput": true, + "preferredFormat": "hex" + } + }, + { + "name": "overrideChartColorText", + "type": "text", + "widget": "colorSelector", + "label": "overrideColorText", + "importance": "low", + "default": "#fff", + + "optional": true, + "spectrum": { + "showInput": true, + "preferredFormat": "hex" + } + } + ] + }, + { + "name": "lineColorGroup", + "type": "group", + "label": "Line color", + "importance": "high", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "name": "lineColor", + "type": "text", + "widget": "colorSelector", + "label": "Color of the line in the chart", + "importance": "low", + "default": "#000", + + "optional": true, + "spectrum": { + "showInput": true, + "preferredFormat": "hex" + } + } + ] + }, + + { "name": "listOfTypes", "type": "list", @@ -54,6 +179,17 @@ "entity": "option", "min": 1, "defaultNum": 2, + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, "field": { "name": "type", "type": "group", @@ -104,6 +240,64 @@ ] } }, + + + { + "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": "Name", + "importance": "medium" + }, + { + "name": "value", + "type": "number", + "label": "Value", + "importance": "low", + "default": 1, + "min": 0.0001, + "decimals": 4 + }, + { + "name": "fontColor", + "type": "text", + "widget": "colorSelector", + "label": "Font Color", + "importance": "low", + "default": "#000", + "optional": true, + "spectrum": { + "showInput": true, + "preferredFormat": "hex" + } + } + ] + } + }, { "name": "figureDefinition", "type": "text", From ea46558dba62d12e009802fb2dc12caa284e0b73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Mon, 15 Feb 2021 11:08:40 +0100 Subject: [PATCH 10/45] added minor fixes to labels on line diagram --- chart.css | 19 ++++++++++++++++++- line.js | 44 +++++++++++++++++++++++++++++--------------- semantics.json | 24 +++++++----------------- 3 files changed, 54 insertions(+), 33 deletions(-) diff --git a/chart.css b/chart.css index 738d0e2d..00948df0 100644 --- a/chart.css +++ b/chart.css @@ -32,7 +32,11 @@ overflow:hidden; } -.h5p-chart text { +.h5p-chart .text-rect { + fill: black; +} +.h5p-chart .text-rect .text-node { + fill: white; } .h5p-chart .line-path { @@ -51,3 +55,16 @@ .h5p-chart .y-axis path { stroke-width: 0; } + +div.tooltip { + position: absolute; + text-align: center; + width: 60px; + height: 28px; + padding: 2px; + font: 12px sans-serif; + background: lightsteelblue; + border: 0px; + border-radius: 8px; + pointer-events: none; +} \ No newline at end of file diff --git a/line.js b/line.js index bcb1e2f1..5d2ca2a5 100644 --- a/line.js +++ b/line.js @@ -102,19 +102,30 @@ H5P.Chart.LineChart = (function () { .enter() .append("path"); var dots = g.selectAll("circle") - .data(dataSet, key) - .enter() - .append("circle") - .attr("r", 5) - .style("fill", params.lineColorGroup) - .on("mouseover", function(d, i) { - d3.select(this).transition().duration(200) - .attr("r", 7); - g.append("text") - .attr("x", function() { return xScale(i) - 2;}) - .attr("y", function() { return yScale(d.value) - 20;}) - .text(function() { return d.value;}) - .attr("id", "text_id");}) + .data(dataSet, key) + .enter() + .append("circle") + .attr("r", 5) + .style("fill", params.lineColorGroup) + .on("mouseover", function(d, i) { + d3.select(this).transition().duration(200) + .attr("r", 7) + + /*var div = svg.append("div") + .attr("class", "tooltip") + .attr("style", "left:" + (xScale(i) - 2) + "px;" + " top:" + (yScale(d.value) - 20) + "px;") + + .style("left", function() { return xScale(i) - 2;}) + .style("top", function() { return yScale(d.value) - 20;}); + div.html(d.name + "
" + d.value);*/ + + g.append("text") + .attr("x", function() { return xScale(i) - 2;}) + .attr("y", function() { return yScale(d.value) - 20;}) + + .text(function() { return d.value;}) + .attr("class", "text-node"); + }) .on("mouseout", function(d) { // Putting style back to default values d3.select(this).transition().duration(200) @@ -122,9 +133,12 @@ H5P.Chart.LineChart = (function () { .style("font-size", 12); // Deleting extra elements - d3.select("#text_id").remove(); + d3.select(".text-node").remove(); + + } + ); + - }); var line = d3.svg.line(); diff --git a/semantics.json b/semantics.json index 6d93b24d..08c9cc51 100644 --- a/semantics.json +++ b/semantics.json @@ -75,7 +75,8 @@ { "field": "graphMode", "equals" : [ - "extendedBarChart" + "extendedBarChart", + "lineChart" ] } ] @@ -185,7 +186,9 @@ { "field": "graphMode", "equals" : [ - "extendedBarChart" + "extendedBarChart", + "barChart", + "pieChart" ] } ] @@ -270,30 +273,17 @@ { "name": "text", "type": "text", - "label": "Name", + "label": "X Value", "importance": "medium" }, { "name": "value", "type": "number", - "label": "Value", + "label": "Y Value", "importance": "low", "default": 1, "min": 0.0001, "decimals": 4 - }, - { - "name": "fontColor", - "type": "text", - "widget": "colorSelector", - "label": "Font Color", - "importance": "low", - "default": "#000", - "optional": true, - "spectrum": { - "showInput": true, - "preferredFormat": "hex" - } } ] } From 2def298c537c56d782e2fde3977b6eb61fcbc995 Mon Sep 17 00:00:00 2001 From: eddiman Date: Mon, 15 Feb 2021 13:01:37 +0100 Subject: [PATCH 11/45] added comments to line chart --- line.js | 87 +++++++++++++------------------------------------- semantics.json | 8 +++-- 2 files changed, 28 insertions(+), 67 deletions(-) diff --git a/line.js b/line.js index 5d2ca2a5..43f29b60 100644 --- a/line.js +++ b/line.js @@ -77,65 +77,37 @@ H5P.Chart.LineChart = (function () { .data(dataSet, key) .enter(); - - //TODO: remove this, not used - // Create inner rect labels - var texts = svg.selectAll('text') - .data([dataSet]) - .enter() - .append('text') - .text(function(d) { - return d.value; - }) - .attr('text-anchor', 'middle') - .attr('fill', function (d) { - if (d.fontColor !== undefined) { - return d.fontColor; - } - return '000000'; - }) - .attr('aria-hidden', true); - - var g = svg.append("g"); + var g = svg.append("g"); //Used for creating a container for the var path = g.selectAll("path") .data([dataSet]) .enter() .append("path"); var dots = g.selectAll("circle") - .data(dataSet, key) - .enter() - .append("circle") - .attr("r", 5) - .style("fill", params.lineColorGroup) - .on("mouseover", function(d, i) { - d3.select(this).transition().duration(200) - .attr("r", 7) - - /*var div = svg.append("div") - .attr("class", "tooltip") - .attr("style", "left:" + (xScale(i) - 2) + "px;" + " top:" + (yScale(d.value) - 20) + "px;") - - .style("left", function() { return xScale(i) - 2;}) - .style("top", function() { return yScale(d.value) - 20;}); - div.html(d.name + "
" + d.value);*/ + .data(dataSet, key) + .enter() + .append("circle") + .attr("r", 5) + .style("fill", params.lineColorGroup) + .on("mouseover", function(d, i) { // Expands the dot the mouse is hovering and appends a text with + d3.select(this).transition().duration(200) + .attr("r", 7); - g.append("text") - .attr("x", function() { return xScale(i) - 2;}) - .attr("y", function() { return yScale(d.value) - 20;}) + g.append("text") + .attr("x", function() { return xScale(i) - 2;}) + .attr("y", function() { return yScale(d.value) - 20;}) - .text(function() { return d.value;}) - .attr("class", "text-node"); - }) + .text(function() { return d.value;}) + .attr("class", "text-node"); + }) .on("mouseout", function(d) { - // Putting style back to default values - d3.select(this).transition().duration(200) - .attr("r", 5) - .style("font-size", 12); - - // Deleting extra elements - d3.select(".text-node").remove(); + // Putting style back to default values + d3.select(this).transition().duration(200) + .attr("r", 5) + .style("font-size", 12); - } + // Deleting extra elements + d3.select(".text-node").remove(); + } ); @@ -219,23 +191,10 @@ H5P.Chart.LineChart = (function () { } }); - // Re-locate text value labels - texts.attr('x', function(d, i) { - if(isYAxisTextDefined) { - //Offset a bt more if the Y Axis text is defined - return xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth;} - else { - return xScale(i) + xScale.rangeBand() / 2 + lineHeight + yAxisLastTickWidth; - } - }).attr('y', function(d) { - //Add more room with a ternary if chart text is defined - return height - lineHeight + (chartTextDefined ? chartTitleTextOffset : 0); - }); var firstXaxisTick = xAxisG.select('.tick'); var firstXaxisTickXPos = d3.transform(firstXaxisTick.attr("transform")).translate[0]; var firstXaxisTickWidth = firstXaxisTick[0][0].getBoundingClientRect().width; - console.log(firstXaxisTickWidth); g.attr('transform', 'translate(' + (firstXaxisTickXPos - firstXaxisTickWidth )+ ',' + (chartTextDefined ? chartTitleTextOffset : 0) + ')'); //Apply line positions after the scales have changed on resize @@ -249,7 +208,7 @@ H5P.Chart.LineChart = (function () { //Move dots according to scale dots.attr("cx", function(d,i) { return xScale(i);}) - .attr("cy", function(d) { return yScale(d.value); }) + .attr("cy", function(d) { return yScale(d.value); }); // Hide ticks from readspeakers, the entire rectangle is already labelled diff --git a/semantics.json b/semantics.json index 08c9cc51..87138609 100644 --- a/semantics.json +++ b/semantics.json @@ -103,7 +103,7 @@ "name": "overrideChartColorsTick", "type": "boolean", "label": "Override the chart color ", - "Described": "If ticked, the color selected will be used as data element color on all bars, and if line chart is selected, define the line color", + "description": "If ticked, the colors selected will be used as data element color on all bars and txt.", "importance": "low", "default": false }, @@ -111,7 +111,8 @@ "name": "overrideChartColor", "type": "text", "widget": "colorSelector", - "label": "overrideColor", + "label": "Override color for chart", + "description": "Defines a new color for all bars, replaces the individual colors in data elements", "importance": "low", "default": "#000", @@ -125,7 +126,8 @@ "name": "overrideChartColorText", "type": "text", "widget": "colorSelector", - "label": "overrideColorText", + "label": "Override text color for chart", + "description": "Defines a new color for all text in bars.", "importance": "low", "default": "#fff", From e6ac302a95133562ca691a85e5ec37522a95964f Mon Sep 17 00:00:00 2001 From: eddiman Date: Mon, 15 Feb 2021 14:15:53 +0100 Subject: [PATCH 12/45] added translations --- language/nb.json | 60 +++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 59 insertions(+), 1 deletion(-) diff --git a/language/nb.json b/language/nb.json index a532db42..3ceb219d 100644 --- a/language/nb.json +++ b/language/nb.json @@ -10,8 +10,10 @@ "label": "Søylediagram" }, { - "value": "extendedBarChart", "label": "Utvidet søylediagram" + }, + { + "label": "Linjediagram" } ] }, @@ -36,6 +38,62 @@ "description" : "En tittel til venstre av grafen til å beskrive Y aksen.", "optional": true }, + { + "name": "overrideColorGroup", + "type": "group", + "label": "Overstyr farger", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "fields": [ + { + "name": "overrideChartColorsTick", + "type": "boolean", + "label": "Overstyr diagramfarge", + "description": "Kryss av for å overstyre fargene i diagrammet", + "importance": "low", + "default": false + }, + { + "name": "overrideChartColor", + "type": "text", + "widget": "colorSelector", + "label": "Overstyringsfarge for søyler", + "description": "Overstyrer søylefargene med valgt farge", + "importance": "low", + "default": "#000", + + "optional": true, + "spectrum": { + "showInput": true, + "preferredFormat": "hex" + } + }, + { + "name": "overrideChartColorText", + "type": "text", + "widget": "colorSelector", + "label": "Overstyringsfarge for tekst i søyler", + "description": "Overstyrer fargen i teksten inni søylene", + "importance": "low", + "default": "#fff", + + "optional": true, + "spectrum": { + "showInput": true, + "preferredFormat": "hex" + } + } + ] + }, { "label":"Verdier", "entity":"verdi", From c9bcfa8250c661c48e80ae73d48f3dba6e98d38e Mon Sep 17 00:00:00 2001 From: eddiman Date: Mon, 15 Feb 2021 15:02:41 +0100 Subject: [PATCH 13/45] fixed more comments in line chart --- extendedBar.js | 4 ++-- line.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/extendedBar.js b/extendedBar.js index 4b273070..c61569a6 100644 --- a/extendedBar.js +++ b/extendedBar.js @@ -6,7 +6,7 @@ H5P.Chart.ExtendedBarChart = (function () { * * Notice: ExtendedBar uses its own listOfTypes in h5p-chart/semantics.json, its differentiated through the use of "showWhen"-widget * @class - * @param {array} params from semantics, contains data set + * @param {Object} params from semantics, contains data set * @param {H5P.jQuery} $wrapper */ function extendedBarChart(params, $wrapper) { @@ -218,7 +218,7 @@ H5P.Chart.ExtendedBarChart = (function () { return height - lineHeight + (chartTextDefined ? chartTitleTextOffset : 0); }); - // 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/line.js b/line.js index 43f29b60..878c8b41 100644 --- a/line.js +++ b/line.js @@ -6,7 +6,7 @@ H5P.Chart.LineChart = (function () { * * Notice: LineChart uses its own listOfTypes in h5p-chart/semantics.json, its differentiated through the use of "showWhen"-widget * @class - * @param {array} params from semantics, contains data set + * @param {Object} params from semantics, contains data set * @param {H5P.jQuery} $wrapper */ function LineChart(params, $wrapper) { @@ -211,7 +211,7 @@ H5P.Chart.LineChart = (function () { .attr("cy", function(d) { return yScale(d.value); }); - // 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); }; } From a2c3c17d76c6bc9f3241abd420ef8af8b7914c15 Mon Sep 17 00:00:00 2001 From: eddiman Date: Mon, 15 Feb 2021 16:28:18 +0100 Subject: [PATCH 14/45] fixed nb lang support, minor changes in semantics, and fixed .en json to same structure as semantics --- language/.en.json | 219 +++++++++++++++++++++++++++++++++++----------- language/nb.json | 107 ++++++++++++---------- semantics.json | 3 +- 3 files changed, 232 insertions(+), 97 deletions(-) diff --git a/language/.en.json b/language/.en.json index 1bc929c4..1af78378 100644 --- a/language/.en.json +++ b/language/.en.json @@ -1,65 +1,184 @@ { "semantics": [ - { - "label": "Type of chart", - "options": [ - { - "label": "Pie Chart" - }, - { - "label": "Bar Chart" - }, - { - "value": "extendedBarChart", - "label": "Extended Bar Chart" + [ + { + "label": "Type of chart", + "options": [ + { + "label": "Pie Chart" + }, + { + "label": "Bar Chart" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" + } + ] + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] } - ] - }, - { - "name": "chartText", - "type": "text", - "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "optional": true - }, - { - "name": "xAxisText", - "type": "text", - "label": "X Axis Title", - "description" : "A title in the bottom of the chart to describe the X axis.", - "optional": true - }, - { - "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 - }, - { - "label": "Data elements", - "entity": "option", - "field": { - "label": "Data element", + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ { - "label": "Font Color" + "label": "Color of the line in the chart" } ] + }, + + + { + "label": "Data elements", + "entity": "option", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "barChart", + "pieChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "Name" + }, + { + "label": "Value" + }, + { + "label": "Color" + }, + { + "label": "Font Color" + } + ] + } + }, + + + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } + }, + { + "label": "Text read by screen readers defining the figure as a chart." } - }, - { - "label": "Text read by readspeakers defining the figure as a chart.", - "default": "Chart" - } + ] ] } diff --git a/language/nb.json b/language/nb.json index 3ceb219d..713267d4 100644 --- a/language/nb.json +++ b/language/nb.json @@ -18,29 +18,18 @@ ] }, { - "name": "chartText", - "type": "text", "label": "Graftittel", - "description" : "Tittelen på grafen, blir lagt til i toppen.", - "optional": true + "description" : "Tittelen på grafen, blir lagt til i toppen." }, { - "name": "xAxisText", - "type": "text", "label": "X aksetittel", - "description" : "En tittel i bunnen av grafen til å beskrive X aksen.", - "optional": true + "description" : "En tittel i bunnen av grafen til å beskrive X aksen." }, { - "name": "yAxisText", - "type": "text", "label": "Y aksetittel", - "description" : "En tittel til venstre av grafen til å beskrive Y aksen.", - "optional": true + "description" : "En tittel til venstre av grafen til å beskrive Y aksen." }, { - "name": "overrideColorGroup", - "type": "group", "label": "Overstyr farger", "widget": "showWhen", "showWhen": { @@ -55,21 +44,12 @@ }, "fields": [ { - "name": "overrideChartColorsTick", - "type": "boolean", "label": "Overstyr diagramfarge", - "description": "Kryss av for å overstyre fargene i diagrammet", - "importance": "low", - "default": false + "description": "Kryss av for å overstyre fargene i diagrammet" }, { - "name": "overrideChartColor", - "type": "text", - "widget": "colorSelector", "label": "Overstyringsfarge for søyler", "description": "Overstyrer søylefargene med valgt farge", - "importance": "low", - "default": "#000", "optional": true, "spectrum": { @@ -78,39 +58,76 @@ } }, { - "name": "overrideChartColorText", - "type": "text", - "widget": "colorSelector", "label": "Overstyringsfarge for tekst i søyler", - "description": "Overstyrer fargen i teksten inni søylene", - "importance": "low", - "default": "#fff", - - "optional": true, - "spectrum": { - "showInput": true, - "preferredFormat": "hex" - } + "description": "Overstyrer fargen i teksten inni søylene" } ] }, { - "label":"Verdier", - "entity":"verdi", - "field":{ - "label":"Verdi", - "fields":[ + "label": "Farge på linje", + "widget": "showWhen", + "fields": [ + { + "label": "Fargen på linjen i linjediagrammet" + } + ] + }, + { + "label": "Verdier", + "entity": "option", + "widget": "showWhen", + "showWhen": { + "rules" : [ { - "label":"Navn" + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "barChart", + "pieChart" + ] + } + ] + }, + "field": { + "label": "Verdi", + "fields": [ + { + "label": "Navn" }, { - "label":"Verdi" + "label": "Verdi" }, { - "label":"Bakgrunnsfarge" + "label": "Farge" + }, + { + "label": "Tekstfarge" + } + ] + } + }, + { + "label": "Verdier", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Verdi", + "fields": [ + { + "label": "X Verdi", + "importance": "medium" }, { - "label":"Tekstfarge" + "label": "Y Verdi" } ] } diff --git a/semantics.json b/semantics.json index 87138609..d49f9d4c 100644 --- a/semantics.json +++ b/semantics.json @@ -23,7 +23,6 @@ } ], "default": "pieChart" - }, { "name": "chartText", @@ -293,7 +292,7 @@ { "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 From 940da3903b8cd73a9abed34cf469061671409e10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Tue, 16 Feb 2021 15:14:33 +0100 Subject: [PATCH 15/45] restructured semantics for easier adding missing fields to rest of lang files, also translated pt-br --- language/.en.json | 78 ++++++++++----------- language/ar.json | 120 +++++++++++++++++++++++++++++++ language/bg.json | 120 +++++++++++++++++++++++++++++++ language/bs.json | 120 +++++++++++++++++++++++++++++++ language/ca.json | 120 +++++++++++++++++++++++++++++++ language/cs.json | 120 +++++++++++++++++++++++++++++++ language/de.json | 120 +++++++++++++++++++++++++++++++ language/el.json | 120 +++++++++++++++++++++++++++++++ language/es-mx.json | 120 +++++++++++++++++++++++++++++++ language/es.json | 120 +++++++++++++++++++++++++++++++ language/et.json | 120 +++++++++++++++++++++++++++++++ language/eu.json | 120 +++++++++++++++++++++++++++++++ language/fi.json | 120 +++++++++++++++++++++++++++++++ language/fr.json | 120 +++++++++++++++++++++++++++++++ language/gl.json | 120 +++++++++++++++++++++++++++++++ language/he.json | 120 +++++++++++++++++++++++++++++++ language/it.json | 120 +++++++++++++++++++++++++++++++ language/ja.json | 120 +++++++++++++++++++++++++++++++ language/km.json | 120 +++++++++++++++++++++++++++++++ language/ko.json | 120 +++++++++++++++++++++++++++++++ language/nb.json | 77 ++++++++++---------- language/nl.json | 120 +++++++++++++++++++++++++++++++ language/nn.json | 122 +++++++++++++++++++++++++++++--- language/pt-br.json | 120 +++++++++++++++++++++++++++++++ language/pt.json | 120 +++++++++++++++++++++++++++++++ language/ru.json | 120 +++++++++++++++++++++++++++++++ language/sl.json | 120 +++++++++++++++++++++++++++++++ language/sma.json | 120 +++++++++++++++++++++++++++++++ language/sme.json | 120 +++++++++++++++++++++++++++++++ language/smj.json | 120 +++++++++++++++++++++++++++++++ language/sv.json | 120 +++++++++++++++++++++++++++++++ language/zh-hans.json | 120 +++++++++++++++++++++++++++++++ language/zh-tw.json | 120 +++++++++++++++++++++++++++++++ language/zh.json | 120 +++++++++++++++++++++++++++++++ semantics.json | 159 +++++++++++++++++++++--------------------- 35 files changed, 3986 insertions(+), 170 deletions(-) diff --git a/language/.en.json b/language/.en.json index 1af78378..2048b244 100644 --- a/language/.en.json +++ b/language/.en.json @@ -18,6 +18,43 @@ } ] }, + { + "label": "Data elements", + "entity": "option", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "barChart", + "pieChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "Name" + }, + { + "label": "Value" + }, + { + "label": "Color" + }, + { + "label": "Font Color" + } + ] + } + }, + { + "label": "Text read by screen readers defining the figure as a chart." + }, { "label": "Chart Title", "description" : "Adds a title on top of chart.", @@ -113,44 +150,6 @@ } ] }, - - - { - "label": "Data elements", - "entity": "option", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "barChart", - "pieChart" - ] - } - ] - }, - "field": { - "label": "Data element", - "fields": [ - { - "label": "Name" - }, - { - "label": "Value" - }, - { - "label": "Color" - }, - { - "label": "Font Color" - } - ] - } - }, - - { "label": "Data elements", "widget": "showWhen", @@ -175,9 +174,6 @@ } ] } - }, - { - "label": "Text read by screen readers defining the figure as a chart." } ] ] diff --git a/language/ar.json b/language/ar.json index 3150ea01..e1377300 100644 --- a/language/ar.json +++ b/language/ar.json @@ -35,6 +35,126 @@ { "label": "قراءة النص بواسطة آلية تحويل النص الى كلام وذلك بتعريف الشكل كمخطط.", "default": "Chart" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/bg.json b/language/bg.json index ac136984..a829863a 100644 --- a/language/bg.json +++ b/language/bg.json @@ -35,6 +35,126 @@ { "label": "Текст, прочетен от четци на екранен текст, определящ фигурата като диаграма.", "default": "Диаграма" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "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 4ece9293..a304e9fd 100644 --- a/language/bs.json +++ b/language/bs.json @@ -35,6 +35,126 @@ { "label": "Text read by readspeakers defining the figure as a chart.", "default": "Chart" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/ca.json b/language/ca.json index 58383c0b..0e65612d 100644 --- a/language/ca.json +++ b/language/ca.json @@ -35,6 +35,126 @@ { "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.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/cs.json b/language/cs.json index 464e486d..dc4b025f 100644 --- a/language/cs.json +++ b/language/cs.json @@ -35,6 +35,126 @@ { "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.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/de.json b/language/de.json index 10ec5edd..2fac7af8 100644 --- a/language/de.json +++ b/language/de.json @@ -35,6 +35,126 @@ { "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.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/el.json b/language/el.json index c25104f2..963b4391 100644 --- a/language/el.json +++ b/language/el.json @@ -35,6 +35,126 @@ { "label": "Κείμενο ακουστικής υποβοήθησης που ορίζει το σχήμα ως γράφημα.", "default": "Γράφημα" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/es-mx.json b/language/es-mx.json index a2aefd70..1937b205 100644 --- a/language/es-mx.json +++ b/language/es-mx.json @@ -35,6 +35,126 @@ { "label": "Texto leido por herramienta de lectura definiendo la figura como un gráfico.", "default": "Gráfico" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/es.json b/language/es.json index a52cf04f..99295fb7 100644 --- a/language/es.json +++ b/language/es.json @@ -35,6 +35,126 @@ { "label": "Texto leido por herramientas de lectura que definen la figura como un gráfico.", "default": "Gráfico" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/et.json b/language/et.json index 05dd7425..c094ff35 100644 --- a/language/et.json +++ b/language/et.json @@ -35,6 +35,126 @@ { "label": "Tekstilugeri loetud tekst, mis määratleb pildi arvjoonisena.", "default": "Arvjoonis" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/eu.json b/language/eu.json index 60cdd9df..49f507ab 100644 --- a/language/eu.json +++ b/language/eu.json @@ -35,6 +35,126 @@ { "label": "Irakurtzen duen bozgorailuak irudia diagrama bezala definitzen duen testua.", "default": "Diagrama" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/fi.json b/language/fi.json index 090d9ccb..d0d62a4e 100644 --- a/language/fi.json +++ b/language/fi.json @@ -35,6 +35,126 @@ { "label": "Ruudunlukijan teksti kaaviolle.", "default": "Kaavio" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/fr.json b/language/fr.json index c1571ebd..84834406 100644 --- a/language/fr.json +++ b/language/fr.json @@ -35,6 +35,126 @@ { "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.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/gl.json b/language/gl.json index d391b017..66deea87 100644 --- a/language/gl.json +++ b/language/gl.json @@ -35,6 +35,126 @@ { "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.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/he.json b/language/he.json index 3e07f701..d6017362 100644 --- a/language/he.json +++ b/language/he.json @@ -35,6 +35,126 @@ { "label": "תאור המוקרא על ידי קורא־מסך יקריא את הרכיב כגרף.", "default": "גרף" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/it.json b/language/it.json index 91302d72..3ef3f8bb 100644 --- a/language/it.json +++ b/language/it.json @@ -35,6 +35,126 @@ { "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.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/ja.json b/language/ja.json index f3e05020..085b01ea 100644 --- a/language/ja.json +++ b/language/ja.json @@ -35,6 +35,126 @@ { "label": "Text read by readspeakers defining the figure as a chart.", "default": "Chart" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/km.json b/language/km.json index 0871cf84..1129b41b 100644 --- a/language/km.json +++ b/language/km.json @@ -36,6 +36,126 @@ { "label": "Text read by readspeakers defining the figure as a chart.", "default": "ក្រាប" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/ko.json b/language/ko.json index 9c4038e0..41077a09 100644 --- a/language/ko.json +++ b/language/ko.json @@ -35,6 +35,126 @@ { "label": "차트를 그림으로 정의하는 자동 읽어주기 기능이 읽는 텍스트", "default": "차트" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/nb.json b/language/nb.json index 713267d4..92877e49 100644 --- a/language/nb.json +++ b/language/nb.json @@ -17,6 +17,44 @@ } ] }, + { + "label": "Verdier", + "entity": "option", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "barChart", + "pieChart" + ] + } + ] + }, + "field": { + "label": "Verdi", + "fields": [ + { + "label": "Navn" + }, + { + "label": "Verdi" + }, + { + "label": "Farge" + }, + { + "label": "Tekstfarge" + } + ] + } + }, + { + "label": "Tekst lest av readspeakers (som definerer figuren som et diagram).", + "default": "Diagram" + }, { "label": "Graftittel", "description" : "Tittelen på grafen, blir lagt til i toppen." @@ -72,40 +110,7 @@ } ] }, - { - "label": "Verdier", - "entity": "option", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "barChart", - "pieChart" - ] - } - ] - }, - "field": { - "label": "Verdi", - "fields": [ - { - "label": "Navn" - }, - { - "label": "Verdi" - }, - { - "label": "Farge" - }, - { - "label": "Tekstfarge" - } - ] - } - }, + { "label": "Verdier", "widget": "showWhen", @@ -131,10 +136,6 @@ } ] } - }, - { - "label": "Tekst lest av readspeakers (som definerer figuren som et diagram).", - "default": "Diagram" } ] } diff --git a/language/nl.json b/language/nl.json index 87f69fe8..422f7257 100644 --- a/language/nl.json +++ b/language/nl.json @@ -35,6 +35,126 @@ { "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.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/nn.json b/language/nn.json index e2dec99d..4a0777a8 100644 --- a/language/nn.json +++ b/language/nn.json @@ -7,34 +7,134 @@ "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ { - "label":"Namn" + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "barChart", + "pieChart" + ] + } + ] + }, + "field": { + "label": "Verdiar", + "fields": [ + { + "label": "Namn" }, { - "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 skjermlesar (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 farger", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "fields": [ + { + "label": "Overstyr diagramfarge", + "description": "Kryss av for å overstyre fargane i diagrammet" + }, + { + "label": "Overstyringsfarge for søyler", + "description": "Overstyrer søylefargane med valgt farge", + + "optional": true, + "spectrum": { + "showInput": true, + "preferredFormat": "hex" + } + }, + { + "label": "Overstyringsfarge for tekst i søyler", + "description": "Overstyrer fargen i teksten inni søylene" + } + ] + }, + { + "label": "Farge på linje", + "widget": "showWhen", + "fields": [ + { + "label": "Fargen på linjen i linjediagrammet" + } + ] + }, + { + "label": "Verdiar", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Verdi", + "fields": [ + { + "label": "X Verdi", + "importance": "medium" + }, + { + "label": "Y Verdi" + } + ] + } } ] } diff --git a/language/pt-br.json b/language/pt-br.json index 02d4e07a..37ca337f 100644 --- a/language/pt-br.json +++ b/language/pt-br.json @@ -35,6 +35,126 @@ { "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.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Título do eixo X", + "description" : "Um título sob o gráfico para descrever o eixo X", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Título do eixo X", + "description" : "Um título sob o gráfico para descrever o eixo Y", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Substituir cores", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Cor da linha no gráfico" + } + ] + }, + { + "label": "Dados de elementos", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Elemento de dado", + "fields": [ + { + "label": "Valor X" + }, + { + "label": "Valor Y" + } + ] + } } ] } diff --git a/language/pt.json b/language/pt.json index aac74085..4bbb069d 100644 --- a/language/pt.json +++ b/language/pt.json @@ -35,6 +35,126 @@ { "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.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/ru.json b/language/ru.json index d96479cd..3d6f264d 100644 --- a/language/ru.json +++ b/language/ru.json @@ -35,6 +35,126 @@ { "label": "Текст, обработанный ассистирующими технологиями определяет фигуру как диаграмму.", "default": "Таблица, диаграмма" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/sl.json b/language/sl.json index 354f1502..fdbedeba 100644 --- a/language/sl.json +++ b/language/sl.json @@ -35,6 +35,126 @@ { "label": "Besedilo za opis grafikona za bralnike zaslona", "default": "Grafikon" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/sma.json b/language/sma.json index 4c215f94..c0d79fc4 100644 --- a/language/sma.json +++ b/language/sma.json @@ -35,6 +35,126 @@ { "label": "Text read by readspeakers defining the figure as a chart.", "default": "Chart" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/sme.json b/language/sme.json index 4c215f94..c0d79fc4 100644 --- a/language/sme.json +++ b/language/sme.json @@ -35,6 +35,126 @@ { "label": "Text read by readspeakers defining the figure as a chart.", "default": "Chart" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/smj.json b/language/smj.json index 4c215f94..c0d79fc4 100644 --- a/language/smj.json +++ b/language/smj.json @@ -35,6 +35,126 @@ { "label": "Text read by readspeakers defining the figure as a chart.", "default": "Chart" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/sv.json b/language/sv.json index e95f40c3..8867d02a 100644 --- a/language/sv.json +++ b/language/sv.json @@ -35,6 +35,126 @@ { "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.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/zh-hans.json b/language/zh-hans.json index 7c15dfea..ac08c633 100644 --- a/language/zh-hans.json +++ b/language/zh-hans.json @@ -35,6 +35,126 @@ { "label": "报读器文本", "default": "图表" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/zh-tw.json b/language/zh-tw.json index 33bb1e00..5a2fce00 100644 --- a/language/zh-tw.json +++ b/language/zh-tw.json @@ -35,6 +35,126 @@ { "label": "閱讀器導讀文字-將圖形定義為圖表.", "default": "圖表" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/language/zh.json b/language/zh.json index e0ad3999..9952431b 100644 --- a/language/zh.json +++ b/language/zh.json @@ -35,6 +35,126 @@ { "label": "報讀器文本", "default": "Chart" + }, + { + "label": "Chart Title", + "description" : "Adds a title on top of chart.", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "X Axis Title", + "description" : "A title in the bottom of the chart to describe the X axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Y Axis Title", + "description" : "A title on the left-hand side of the chart to describe the Y axis.", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "lineChart" + ] + } + ] + } + }, + { + "label": "Override color controls", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart" + ] + } + ] + }, + "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", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "fields": [ + { + "label": "Color of the line in the chart" + } + ] + }, + { + "label": "Data elements", + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "lineChart" + ] + } + ] + }, + "field": { + "label": "Data element", + "fields": [ + { + "label": "X Value" + }, + { + "label": "Y Value" + } + ] + } } ] } diff --git a/semantics.json b/semantics.json index d49f9d4c..028c3d4f 100644 --- a/semantics.json +++ b/semantics.json @@ -24,6 +24,85 @@ ], "default": "pieChart" }, + { + "name": "listOfTypes", + "type": "list", + "label": "Data elements", + "importance": "high", + "entity": "option", + "min": 1, + "defaultNum": 2, + "widget": "showWhen", + "showWhen": { + "rules" : [ + { + "field": "graphMode", + "equals" : [ + "extendedBarChart", + "barChart", + "pieChart" + ] + } + ] + }, + "field": { + "name": "type", + "type": "group", + "label": "Data element", + "importance": "high", + "fields": [ + { + "name": "text", + "type": "text", + "label": "Name", + "importance": "medium" + }, + { + "name": "value", + "type": "number", + "label": "Value", + "importance": "low", + "default": 1, + "min": 0.0001, + "decimals": 4 + }, + { + "name": "color", + "type": "text", + "widget": "colorSelector", + "label": "Color", + "importance": "low", + "default": "#000", + "optional": true, + "spectrum": { + "showInput": true, + "preferredFormat": "hex" + } + }, + { + "name": "fontColor", + "type": "text", + "widget": "colorSelector", + "label": "Font Color", + "importance": "low", + "default": "#fff", + "optional": true, + "spectrum": { + "showInput": true, + "preferredFormat": "hex" + } + } + ] + } + }, + { + "name": "figureDefinition", + "type": "text", + "label": "Text read by screen readers defining the figure as a chart.", + "importance": "low", + "default": "Chart", + "common": true + }, { "name": "chartText", "type": "text", @@ -173,78 +252,6 @@ }, - { - "name": "listOfTypes", - "type": "list", - "label": "Data elements", - "importance": "high", - "entity": "option", - "min": 1, - "defaultNum": 2, - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "barChart", - "pieChart" - ] - } - ] - }, - "field": { - "name": "type", - "type": "group", - "label": "Data element", - "importance": "high", - "fields": [ - { - "name": "text", - "type": "text", - "label": "Name", - "importance": "medium" - }, - { - "name": "value", - "type": "number", - "label": "Value", - "importance": "low", - "default": 1, - "min": 0.0001, - "decimals": 4 - }, - { - "name": "color", - "type": "text", - "widget": "colorSelector", - "label": "Color", - "importance": "low", - "default": "#000", - "optional": true, - "spectrum": { - "showInput": true, - "preferredFormat": "hex" - } - }, - { - "name": "fontColor", - "type": "text", - "widget": "colorSelector", - "label": "Font Color", - "importance": "low", - "default": "#fff", - "optional": true, - "spectrum": { - "showInput": true, - "preferredFormat": "hex" - } - } - ] - } - }, - { "name": "listOfTypes", @@ -288,13 +295,5 @@ } ] } - }, - { - "name": "figureDefinition", - "type": "text", - "label": "Text read by screen readers defining the figure as a chart.", - "importance": "low", - "default": "Chart", - "common": true } ] From 7a520b0f78d6a0c1ec2abfe9db8fe90794bf242b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Tue, 16 Feb 2021 15:21:28 +0100 Subject: [PATCH 16/45] added missing pt-br translation --- language/pt-br.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/language/pt-br.json b/language/pt-br.json index 37ca337f..901c15a5 100644 --- a/language/pt-br.json +++ b/language/pt-br.json @@ -8,6 +8,12 @@ }, { "label": "Gráfico de barras" + }, + { + "label": "Gráfico de barras aumentado" + }, + { + "label": "Gráfico de linha" } ] }, From a7ec45dd66843ced1057102294248b3da7fc4d06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Tue, 16 Feb 2021 16:06:19 +0100 Subject: [PATCH 17/45] removed unnecessary lines in lang jsons --- bar.js | 2 +- chart.js | 2 +- language/.en.json | 93 +++---------------------------------------- language/ar.json | 83 +++++--------------------------------- language/bg.json | 81 +++++-------------------------------- language/bs.json | 85 +++++---------------------------------- language/ca.json | 83 +++++--------------------------------- language/cs.json | 83 +++++--------------------------------- language/de.json | 81 +++++-------------------------------- language/el.json | 83 +++++--------------------------------- language/es-mx.json | 83 +++++--------------------------------- language/es.json | 83 +++++--------------------------------- language/et.json | 83 +++++--------------------------------- language/eu.json | 83 +++++--------------------------------- language/fi.json | 83 +++++--------------------------------- language/fr.json | 83 +++++--------------------------------- language/gl.json | 83 +++++--------------------------------- language/he.json | 83 +++++--------------------------------- language/it.json | 83 +++++--------------------------------- language/ja.json | 85 +++++---------------------------------- language/km.json | 85 +++++---------------------------------- language/ko.json | 83 +++++--------------------------------- language/nb.json | 50 ++--------------------- language/nl.json | 83 +++++--------------------------------- language/nn.json | 55 +++---------------------- language/pt-br.json | 79 +++--------------------------------- language/pt.json | 85 +++++---------------------------------- language/ru.json | 83 +++++--------------------------------- language/sl.json | 83 +++++--------------------------------- language/sma.json | 85 +++++---------------------------------- language/sme.json | 85 +++++---------------------------------- language/smj.json | 85 +++++---------------------------------- language/sv.json | 83 +++++--------------------------------- language/zh-hans.json | 83 +++++--------------------------------- language/zh-tw.json | 83 +++++--------------------------------- language/zh.json | 83 +++++--------------------------------- 36 files changed, 326 insertions(+), 2455 deletions(-) diff --git a/bar.js b/bar.js index a21b5e0e..28057dc7 100644 --- a/bar.js +++ b/bar.js @@ -125,7 +125,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.js b/chart.js index 41a4a816..b4a6cf5c 100644 --- a/chart.js +++ b/chart.js @@ -53,7 +53,7 @@ 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"; } diff --git a/language/.en.json b/language/.en.json index 2048b244..b2f3e8cd 100644 --- a/language/.en.json +++ b/language/.en.json @@ -1,6 +1,5 @@ { "semantics": [ - [ { "label": "Type of chart", "options": [ @@ -21,19 +20,6 @@ { "label": "Data elements", "entity": "option", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "barChart", - "pieChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -53,68 +39,23 @@ } }, { - "label": "Text read by screen readers 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.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -131,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -152,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -176,5 +94,4 @@ } } ] - ] } diff --git a/language/ar.json b/language/ar.json index e1377300..80868004 100644 --- a/language/ar.json +++ b/language/ar.json @@ -8,6 +8,12 @@ }, { "label": "مخطط شريطي" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/bg.json b/language/bg.json index a829863a..83d523fb 100644 --- a/language/bg.json +++ b/language/bg.json @@ -8,6 +8,12 @@ }, { "label": "Лентова диаграма" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ diff --git a/language/bs.json b/language/bs.json index a304e9fd..b916eda0 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,69 +39,23 @@ } }, { - "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.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/ca.json b/language/ca.json index 0e65612d..b45781a0 100644 --- a/language/ca.json +++ b/language/ca.json @@ -8,6 +8,12 @@ }, { "label": "Diagrama de barres" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/cs.json b/language/cs.json index dc4b025f..c634e750 100644 --- a/language/cs.json +++ b/language/cs.json @@ -8,6 +8,12 @@ }, { "label": "Sloupcový graf" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/de.json b/language/de.json index 2fac7af8..fafaf07d 100644 --- a/language/de.json +++ b/language/de.json @@ -8,6 +8,12 @@ }, { "label": "Balkendiagramm" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ diff --git a/language/el.json b/language/el.json index 963b4391..1f6a8047 100644 --- a/language/el.json +++ b/language/el.json @@ -8,6 +8,12 @@ }, { "label":"Ραβδόγραμμα" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/es-mx.json b/language/es-mx.json index 1937b205..7adc2c84 100644 --- a/language/es-mx.json +++ b/language/es-mx.json @@ -8,6 +8,12 @@ }, { "label":"Gráfico de barras" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/es.json b/language/es.json index 99295fb7..611079e4 100644 --- a/language/es.json +++ b/language/es.json @@ -8,6 +8,12 @@ }, { "label":"Gráfico de barras" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/et.json b/language/et.json index c094ff35..5e8405bb 100644 --- a/language/et.json +++ b/language/et.json @@ -8,6 +8,12 @@ }, { "label": "Tulpjoonis" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/eu.json b/language/eu.json index 49f507ab..51359cb1 100644 --- a/language/eu.json +++ b/language/eu.json @@ -8,6 +8,12 @@ }, { "label": "Barra-diagrama" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/fi.json b/language/fi.json index d0d62a4e..b37afbea 100644 --- a/language/fi.json +++ b/language/fi.json @@ -8,6 +8,12 @@ }, { "label": "Pylväs" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/fr.json b/language/fr.json index 84834406..b0a735d8 100644 --- a/language/fr.json +++ b/language/fr.json @@ -8,6 +8,12 @@ }, { "label": "Graphique en barres" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/gl.json b/language/gl.json index 66deea87..7118bac4 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" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/he.json b/language/he.json index d6017362..c8dbd63b 100644 --- a/language/he.json +++ b/language/he.json @@ -8,6 +8,12 @@ }, { "label": "גרף עמודות" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/it.json b/language/it.json index 3ef3f8bb..9842cb83 100644 --- a/language/it.json +++ b/language/it.json @@ -8,6 +8,12 @@ }, { "label": "Grafico a barre" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/ja.json b/language/ja.json index 085b01ea..94d1958b 100644 --- a/language/ja.json +++ b/language/ja.json @@ -8,6 +8,12 @@ }, { "label":"棒グラフ" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -33,69 +39,23 @@ } }, { - "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.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/km.json b/language/km.json index 1129b41b..0df7dbae 100644 --- a/language/km.json +++ b/language/km.json @@ -9,6 +9,12 @@ }, { "label": "Bar Chart" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -34,69 +40,23 @@ } }, { - "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.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -113,19 +73,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -134,17 +82,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -158,4 +95,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/ko.json b/language/ko.json index 41077a09..8e2a2cdb 100644 --- a/language/ko.json +++ b/language/ko.json @@ -8,6 +8,12 @@ }, { "label": "막대 차트" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/nb.json b/language/nb.json index 92877e49..7522c209 100644 --- a/language/nb.json +++ b/language/nb.json @@ -20,19 +20,6 @@ { "label": "Verdier", "entity": "option", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "barChart", - "pieChart" - ] - } - ] - }, "field": { "label": "Verdi", "fields": [ @@ -52,7 +39,7 @@ } }, { - "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" }, { @@ -69,17 +56,6 @@ }, { "label": "Overstyr farger", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Overstyr diagramfarge", @@ -87,13 +63,7 @@ }, { "label": "Overstyringsfarge for søyler", - "description": "Overstyrer søylefargene med valgt farge", - - "optional": true, - "spectrum": { - "showInput": true, - "preferredFormat": "hex" - } + "description": "Overstyrer søylefargene med valgt farge" }, { "label": "Overstyringsfarge for tekst i søyler", @@ -103,33 +73,19 @@ }, { "label": "Farge på linje", - "widget": "showWhen", "fields": [ { "label": "Fargen på linjen i linjediagrammet" } ] }, - { "label": "Verdier", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Verdi", "fields": [ { - "label": "X Verdi", - "importance": "medium" + "label": "X Verdi" }, { "label": "Y Verdi" diff --git a/language/nl.json b/language/nl.json index 422f7257..2558c68e 100644 --- a/language/nl.json +++ b/language/nl.json @@ -8,6 +8,12 @@ }, { "label": "Staafdiagram" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/nn.json b/language/nn.json index 4a0777a8..5e15e377 100644 --- a/language/nn.json +++ b/language/nn.json @@ -20,24 +20,11 @@ { "label": "Verdiar", "entity": "option", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "barChart", - "pieChart" - ] - } - ] - }, "field": { - "label": "Verdiar", + "label": "Verdi", "fields": [ { - "label": "Namn" + "label": "Navn" }, { "label": "Verdi" @@ -52,7 +39,7 @@ } }, { - "label": "Tekst lest av skjermlesar (som definerer figuren som eit diagram).", + "label": "Tekst lest av screen readers (som definerer figuren som eit diagram).", "default": "Diagram" }, { @@ -68,18 +55,7 @@ "description" : "Ein tittel til venstre av grafen til å beskrive Y aksen." }, { - "label": "Overstyr farger", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, + "label": "Overstyr fargar", "fields": [ { "label": "Overstyr diagramfarge", @@ -87,13 +63,7 @@ }, { "label": "Overstyringsfarge for søyler", - "description": "Overstyrer søylefargane med valgt farge", - - "optional": true, - "spectrum": { - "showInput": true, - "preferredFormat": "hex" - } + "description": "Overstyrer søylefargane med valgt farge" }, { "label": "Overstyringsfarge for tekst i søyler", @@ -103,7 +73,6 @@ }, { "label": "Farge på linje", - "widget": "showWhen", "fields": [ { "label": "Fargen på linjen i linjediagrammet" @@ -112,23 +81,11 @@ }, { "label": "Verdiar", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Verdi", "fields": [ { - "label": "X Verdi", - "importance": "medium" + "label": "X Verdi" }, { "label": "Y Verdi" diff --git a/language/pt-br.json b/language/pt-br.json index 901c15a5..b1e796aa 100644 --- a/language/pt-br.json +++ b/language/pt-br.json @@ -18,10 +18,10 @@ ] }, { - "label": "Dados", + "label": "Elemento de dados", "entity": "option", "field": { - "label": "Dados", + "label": "Elemento de dado", "fields": [ { "label": "Nome" @@ -44,64 +44,18 @@ }, { "label": "Título do gráfico", - "description" : "Adiciona um título acima de gráfico.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "Um título sob o gráfico para descrever o eixo Y" }, { "label": "Substituir cores", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Substituir as cores do gráfico", @@ -118,19 +72,7 @@ ] }, { - "label": "Cor da linha", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Cor da linha no gráfico" @@ -139,17 +81,6 @@ }, { "label": "Dados de elementos", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Elemento de dado", "fields": [ diff --git a/language/pt.json b/language/pt.json index 4bbb069d..fb3c0648 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" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -106,25 +66,13 @@ "description": "Defines a new color for all bars, replaces the individual colors in data elements" }, { - "label": "Override text color for chart", + "label": "Override text color for chart", "description": "Defines a new color for all text in bars." } ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/ru.json b/language/ru.json index 3d6f264d..6c21e23c 100644 --- a/language/ru.json +++ b/language/ru.json @@ -8,6 +8,12 @@ }, { "label": "Гистограмма" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/sl.json b/language/sl.json index fdbedeba..37ea9346 100644 --- a/language/sl.json +++ b/language/sl.json @@ -8,6 +8,12 @@ }, { "label": "Stolpični" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/sma.json b/language/sma.json index c0d79fc4..9d6cf9bd 100644 --- a/language/sma.json +++ b/language/sma.json @@ -8,6 +8,12 @@ }, { "label": "Bar Chart" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -33,69 +39,23 @@ } }, { - "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.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/sme.json b/language/sme.json index c0d79fc4..9d6cf9bd 100644 --- a/language/sme.json +++ b/language/sme.json @@ -8,6 +8,12 @@ }, { "label": "Bar Chart" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -33,69 +39,23 @@ } }, { - "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.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/smj.json b/language/smj.json index c0d79fc4..9d6cf9bd 100644 --- a/language/smj.json +++ b/language/smj.json @@ -8,6 +8,12 @@ }, { "label": "Bar Chart" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -33,69 +39,23 @@ } }, { - "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.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/sv.json b/language/sv.json index 8867d02a..730d6aaf 100644 --- a/language/sv.json +++ b/language/sv.json @@ -8,6 +8,12 @@ }, { "label": "Stapeldiagram" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/zh-hans.json b/language/zh-hans.json index ac08c633..dc573ef7 100644 --- a/language/zh-hans.json +++ b/language/zh-hans.json @@ -8,6 +8,12 @@ }, { "label": "直方图" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/zh-tw.json b/language/zh-tw.json index 5a2fce00..1bcbd627 100644 --- a/language/zh-tw.json +++ b/language/zh-tw.json @@ -8,6 +8,12 @@ }, { "label": "長條圖" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file diff --git a/language/zh.json b/language/zh.json index 9952431b..b006bab9 100644 --- a/language/zh.json +++ b/language/zh.json @@ -8,6 +8,12 @@ }, { "label": "直方圖" + }, + { + "label": "Extended Bar Chart" + }, + { + "label": "Line Chart" } ] }, @@ -38,64 +44,18 @@ }, { "label": "Chart Title", - "description" : "Adds a title on top of chart.", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "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.", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart", - "lineChart" - ] - } - ] - } + "description" : "A title on the left-hand side of the chart to describe the Y axis." }, { "label": "Override color controls", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "extendedBarChart" - ] - } - ] - }, "fields": [ { "label": "Override the chart color ", @@ -112,19 +72,7 @@ ] }, { - "label": "Line color", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "fields": [ { "label": "Color of the line in the chart" @@ -133,17 +81,6 @@ }, { "label": "Data elements", - "widget": "showWhen", - "showWhen": { - "rules" : [ - { - "field": "graphMode", - "equals" : [ - "lineChart" - ] - } - ] - }, "field": { "label": "Data element", "fields": [ @@ -157,4 +94,4 @@ } } ] -} +} \ No newline at end of file From 3247fbc59110c73874f84dbef8f7320569337ae9 Mon Sep 17 00:00:00 2001 From: "Kent Inge F. Simonsen" Date: Thu, 18 Feb 2021 13:24:00 +0100 Subject: [PATCH 18/45] bump patch version --- library.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/library.json b/library.json index 3980a63d..0b3cb430 100644 --- a/library.json +++ b/library.json @@ -3,7 +3,7 @@ "description": "Create different charts", "majorVersion": 1, "minorVersion": 2, - "patchVersion": 18, + "patchVersion": 19, "runnable": 1, "author": "Joubel", "license": "MIT", From 31a557fee5caa7bf048bdd21cdfa12b66512694e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Thu, 18 Feb 2021 16:04:51 +0100 Subject: [PATCH 19/45] fixed default color for line and offsets for no chart title and y axis ticks --- line.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/line.js b/line.js index 878c8b41..55c762bb 100644 --- a/line.js +++ b/line.js @@ -129,10 +129,10 @@ H5P.Chart.LineChart = (function () { var xAxisRectOffset = lineHeight * 3; var chartTitleTextHeight = svg.select('.chart-title')[0][0].getBoundingClientRect().height; var chartTitleTextOffset = chartTitleTextHeight + lineHeight; // 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) - (chartTextDefined ? chartTitleTextOffset : 0); // Add space for labels below, and also the chart title + var height = h - xTickSize - (lineHeight) - (chartTextDefined ? chartTitleTextOffset : 40); // 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 * 2) - (chartTextDefined ? chartTitleTextOffset : 0); + height = h - xTickSize - (lineHeight * 2) - (chartTextDefined ? chartTitleTextOffset : 40); } // Update SVG size svg.attr('width', width) @@ -148,19 +148,19 @@ H5P.Chart.LineChart = (function () { xAxis.tickSize([0]); xAxisG.attr('transform', 'translate(0,0)').call(xAxis); - //A lot of conditional moving here. If Y axis text is defined, we translate 40 px in the X direction. In the Y direction we translate downward the by current chartTitle height and line height - yAxisG - .attr('transform', 'translate(' + (isYAxisTextDefined ? 40 : 10) + ',' + (chartTextDefined ? chartTitleTextOffset : 0) + ')'); 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; + + //A lot of conditional moving here. If Y axis text is defined, we translate 40 px in the X direction. In the Y direction we translate downward the by current chartTitle height and line height + yAxisG + .attr('transform', 'translate(' + (isYAxisTextDefined ? 15 + yAxisLastTickWidth: 10 + yAxisLastTickWidth) + ',' + (chartTextDefined ? chartTitleTextOffset : 40) + ')'); //Sets the axes titles on resize chartText .attr('x', width/2 ) @@ -178,7 +178,7 @@ H5P.Chart.LineChart = (function () { //Used for positioning/translating the X axis ticks to be in the middle of each bar xAxisGTexts.attr('transform', function(d, i) { var x; - var y = chartTextDefined ? chartTitleTextOffset: 0; + var y = chartTextDefined ? chartTitleTextOffset: 20; if(isYAxisTextDefined) { x = xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth; y += height; @@ -195,7 +195,7 @@ H5P.Chart.LineChart = (function () { var firstXaxisTick = xAxisG.select('.tick'); var firstXaxisTickXPos = d3.transform(firstXaxisTick.attr("transform")).translate[0]; var firstXaxisTickWidth = firstXaxisTick[0][0].getBoundingClientRect().width; - g.attr('transform', 'translate(' + (firstXaxisTickXPos - firstXaxisTickWidth )+ ',' + (chartTextDefined ? chartTitleTextOffset : 0) + ')'); + g.attr('transform', 'translate(' + (firstXaxisTickXPos - firstXaxisTickWidth )+ ',' + (chartTextDefined ? chartTitleTextOffset : 40) + ')'); //Apply line positions after the scales have changed on resize line.x(function(d,i) {return xScale(i);}) @@ -204,8 +204,7 @@ H5P.Chart.LineChart = (function () { //apply lines after resize path.attr("class", "line-path") .attr("d", line) - .style("stroke", params.lineColorGroup); - + .style("stroke", params.lineColorGroup ? params.lineColorGroup : "#000000"); //Move dots according to scale dots.attr("cx", function(d,i) { return xScale(i);}) .attr("cy", function(d) { return yScale(d.value); }); From 8bcfaaaa03979b001433199fd16c3f73931577c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Thu, 18 Feb 2021 17:23:11 +0100 Subject: [PATCH 20/45] added default color to lineGroup --- line.js | 2 +- semantics.json | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/line.js b/line.js index 55c762bb..b0f40ef4 100644 --- a/line.js +++ b/line.js @@ -204,7 +204,7 @@ H5P.Chart.LineChart = (function () { //apply lines after resize path.attr("class", "line-path") .attr("d", line) - .style("stroke", params.lineColorGroup ? params.lineColorGroup : "#000000"); + .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); }); diff --git a/semantics.json b/semantics.json index 028c3d4f..5690f10c 100644 --- a/semantics.json +++ b/semantics.json @@ -223,6 +223,7 @@ "label": "Line color", "importance": "high", "widget": "showWhen", + "default": "#000000", "showWhen": { "rules" : [ { @@ -240,8 +241,6 @@ "widget": "colorSelector", "label": "Color of the line in the chart", "importance": "low", - "default": "#000", - "optional": true, "spectrum": { "showInput": true, From 72b5d96c6bda4534771b6fecd6d9b339a51d774a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Thu, 18 Feb 2021 17:26:58 +0100 Subject: [PATCH 21/45] Update line.js inline condittionals MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sindre Bøyum --- line.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/line.js b/line.js index b0f40ef4..059c7f85 100644 --- a/line.js +++ b/line.js @@ -159,8 +159,11 @@ H5P.Chart.LineChart = (function () { //A lot of conditional moving here. If Y axis text is defined, we translate 40 px in the X direction. In the Y direction we translate downward the by current chartTitle height and line height + const xTranslation = (isYAxisTextDefined ? 15 + yAxisLastTickWidth : 10 + yAxisLastTickWidth); + const yTranslation = (chartTextDefined ? chartTitleTextOffset : 40); + yAxisG - .attr('transform', 'translate(' + (isYAxisTextDefined ? 15 + yAxisLastTickWidth: 10 + yAxisLastTickWidth) + ',' + (chartTextDefined ? chartTitleTextOffset : 40) + ')'); + .attr('transform', `translate(${xTranslation}, ${yTranslation})`); //Sets the axes titles on resize chartText .attr('x', width/2 ) From 4233c8808add6528079b8f3dbf874b3adcdf1edb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Fri, 19 Feb 2021 15:23:49 +0100 Subject: [PATCH 22/45] fixed offset for chart when no chart is present --- extendedBar.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/extendedBar.js b/extendedBar.js index c61569a6..376970d7 100644 --- a/extendedBar.js +++ b/extendedBar.js @@ -127,10 +127,10 @@ H5P.Chart.ExtendedBarChart = (function () { var xAxisRectOffset = lineHeight * 3; var chartTitleTextHeight = svg.select('.chart-title')[0][0].getBoundingClientRect().height; var chartTitleTextOffset = chartTitleTextHeight + lineHeight; // 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) - (chartTextDefined ? chartTitleTextOffset : 0); // Add space for labels below, and also the chart title + var height = h - xTickSize - (lineHeight) - (chartTextDefined ? chartTitleTextOffset : 20); // 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 * 2) - (chartTextDefined ? chartTitleTextOffset : 0); + height = h - xTickSize - (lineHeight * 2) - (chartTextDefined ? chartTitleTextOffset : 20); } // Update SVG size @@ -147,7 +147,7 @@ H5P.Chart.ExtendedBarChart = (function () { xAxisG.attr('transform', 'translate(0,0)').call(xAxis); //A lot of conditional moving here. If Y axis text is defined, we translate 40 px in the X direction. In the Y direction we translate downward the by current chartTitle height and line height yAxisG - .attr('transform', 'translate(' + (isYAxisTextDefined ? 40 : 10) + ',' + (chartTextDefined ? chartTitleTextOffset : 0) + ')'); + .attr('transform', 'translate(' + (isYAxisTextDefined ? 40 : 10) + ',' + (chartTextDefined ? chartTitleTextOffset : 20) + ')'); yAxisG.call(yAxis .tickSize(-width, 0, 0) @@ -168,7 +168,7 @@ H5P.Chart.ExtendedBarChart = (function () { } }).attr('y', function(d) { //If chart text is defined, add the height of the svg chart text and the lineheight to offsett the rects on the y - return chartTextDefined ? yScale(d.value) + chartTitleTextOffset : yScale(d.value); + return chartTextDefined ? yScale(d.value) + chartTitleTextOffset : 20 + yScale(d.value); }).attr('width', xScale.rangeBand()) .attr('height', function(d) { return height - yScale(d.value) ; @@ -191,7 +191,7 @@ H5P.Chart.ExtendedBarChart = (function () { //Used for positioning/translating the X axis ticks to be in the middle of each bar xAxisGTexts.attr('transform', function(d, i) { var x; - var y = chartTextDefined ? chartTitleTextOffset: 0; + var y = chartTextDefined ? chartTitleTextOffset: 20; if(isYAxisTextDefined) { x = xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth; y += height; @@ -215,7 +215,7 @@ H5P.Chart.ExtendedBarChart = (function () { } }).attr('y', function(d) { //Add more room with a ternary if chart text is defined - return height - lineHeight + (chartTextDefined ? chartTitleTextOffset : 0); + return height - lineHeight + (chartTextDefined ? chartTitleTextOffset : 20); }); // Hide ticks from screen readers, the entire rectangle is already labelled From f0d4c7dc700e0a8f0a91d684a301e6b916730549 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Fri, 19 Feb 2021 15:46:03 +0100 Subject: [PATCH 23/45] fixed a minor offset issue of x axis tick when chart title is not defined --- line.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/line.js b/line.js index 059c7f85..21076912 100644 --- a/line.js +++ b/line.js @@ -181,7 +181,7 @@ H5P.Chart.LineChart = (function () { //Used for positioning/translating the X axis ticks to be in the middle of each bar xAxisGTexts.attr('transform', function(d, i) { var x; - var y = chartTextDefined ? chartTitleTextOffset: 20; + var y = chartTextDefined ? chartTitleTextOffset: 40; if(isYAxisTextDefined) { x = xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth; y += height; From fd9cf70a52b275add7728ea59f58a657e87e2614 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Wed, 10 Mar 2021 16:31:31 +0100 Subject: [PATCH 24/45] fixed line and x axis alignment issues, fixed labels and tabbing and hover states for a11y --- chart.css | 32 +++++----- line.js | 180 ++++++++++++++++++++++++++++++++++++++---------------- 2 files changed, 143 insertions(+), 69 deletions(-) diff --git a/chart.css b/chart.css index 00948df0..f5e0a1dd 100644 --- a/chart.css +++ b/chart.css @@ -34,37 +34,39 @@ .h5p-chart .text-rect { fill: black; + opacity: 0.7; } -.h5p-chart .text-rect .text-node { +.h5p-chart .text-node { fill: white; + font-size: 1.2em; +} + +.h5p-chart circle:focus { + outline: black 2px solid; } .h5p-chart .line-path { fill: none; - stroke-width: 1.5px; + 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 .y-axis path { stroke-width: 0; } - -div.tooltip { - position: absolute; - text-align: center; - width: 60px; - height: 28px; - padding: 2px; - font: 12px sans-serif; - background: lightsteelblue; - border: 0px; - border-radius: 8px; - pointer-events: none; -} \ No newline at end of file diff --git a/line.js b/line.js index 21076912..e33a8ac4 100644 --- a/line.js +++ b/line.js @@ -1,8 +1,10 @@ /*global d3*/ + + H5P.Chart.LineChart = (function () { /** - * Creates a bar chart from the given data set. + * 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 @@ -12,8 +14,6 @@ H5P.Chart.LineChart = (function () { function LineChart(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; @@ -40,25 +40,34 @@ H5P.Chart.LineChart = (function () { .scale(yScale) .orient('left'); // Create SVG element - var svg = d3.select($wrapper[0]) - .append('svg'); + var isShowingTooltip = false; - svg.append('desc').html('chart'); + 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('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') @@ -66,49 +75,104 @@ H5P.Chart.LineChart = (function () { 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); - // Create inner rect labels - var xAxisGTexts = svg.selectAll('x-axis text') - .data(dataSet, key) - .enter(); - - var g = svg.append("g"); //Used for creating a container for the - var path = g.selectAll("path") + var lineGroup = svg.append("g"); //Used for creating a container for the lines + var path = lineGroup.selectAll("path") .data([dataSet]) .enter() .append("path"); - var dots = g.selectAll("circle") + var circeRadius = 7; + var dots = lineGroup.selectAll("circle") .data(dataSet, key) .enter() .append("circle") - .attr("r", 5) + .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("mouseover", function(d, i) { // Expands the dot the mouse is hovering and appends a text with - d3.select(this).transition().duration(200) - .attr("r", 7); + .on("keyup", function(d,i) { + if(d3.event.keyCode === 9 && isShowingTooltip ){ + onCircleExit(this); + } + + if(d3.event.keyCode === 9 && !isShowingTooltip){ + onCircleEnter(d,i, this); + } + }) - g.append("text") - .attr("x", function() { return xScale(i) - 2;}) - .attr("y", function() { return yScale(d.value) - 20;}) + .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); + } - .text(function() { return d.value;}) - .attr("class", "text-node"); }) - .on("mouseout", function(d) { - // Putting style back to default values - d3.select(this).transition().duration(200) - .attr("r", 5) - .style("font-size", 12); - // Deleting extra elements - d3.select(".text-node").remove(); - } - ); + .on("mouseout", function(d) { // Animates exit animation for hover exit + d3.select(this).transition().duration(200) + .attr("r", circeRadius) + .style("font-size", 12); + }); + + 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; + rectWidth = rectWidth + textWidth; + + rect.attr("width", function() { return rectWidth;}) + .transition().duration(200) + group.attr('transform', 'translate (' + (xScale(i) - (rectWidth / 2)) + ',' + (yScale(d.value) - (rectHeight * 1.5)) + ')'); + + text + .attr("x", function() { return (rectWidth - textWidth) / 2 ;}) + .attr("y", function() { return textHeight ;}) + .attr("id", "value-" + i) + .text(function() { return d.value;}); + isShowingTooltip = true; + + } + + function onCircleExit() { + // Deleting extra elements + d3.selectAll(".text-group").remove(); + isShowingTooltip = false; + } @@ -127,12 +191,13 @@ H5P.Chart.LineChart = (function () { var lineHeight = (1.25 * fontSize); var xTickSize = (fontSize * 0.125); var xAxisRectOffset = lineHeight * 3; - var chartTitleTextHeight = svg.select('.chart-title')[0][0].getBoundingClientRect().height; - var chartTitleTextOffset = chartTitleTextHeight + lineHeight; // 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) - (chartTextDefined ? chartTitleTextOffset : 40); // Add space for labels below, and also the chart title + //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; // 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 * 2) - (chartTextDefined ? chartTitleTextOffset : 40); + height = h - xTickSize - (lineHeight * 4) - chartTitleTextOffset; } // Update SVG size svg.attr('width', width) @@ -147,8 +212,9 @@ H5P.Chart.LineChart = (function () { y.range([height, 0]); xAxis.tickSize([0]); - xAxisG.attr('transform', 'translate(0,0)').call(xAxis); - + xAxisG.call(xAxis); + var firstXaxisTick = xAxisG.select('.tick'); + var firstXaxisTickWidth = firstXaxisTick[0][0].getBoundingClientRect().width; yAxisG.call(yAxis .tickSize(-width, 0, 0) .ticks(getSmartTicks(d3.max(dataSet).value).count)); @@ -157,13 +223,15 @@ H5P.Chart.LineChart = (function () { //Gets width of last Y Axis tick text element var yAxisLastTickWidth = yAxisTicksText[yAxisTicksText.length-1].getBoundingClientRect().width; - - //A lot of conditional moving here. If Y axis text is defined, we translate 40 px in the X direction. In the Y direction we translate downward the by current chartTitle height and line height - const xTranslation = (isYAxisTextDefined ? 15 + yAxisLastTickWidth : 10 + yAxisLastTickWidth); - const yTranslation = (chartTextDefined ? chartTitleTextOffset : 40); - + //A lot of conditional moving here. + const xAxisXTranslation = (isYAxisTextDefined ? firstXaxisTickWidth / 2 : 0 ); + var minYAxisGMargin = 20; + const yAxisXTranslation = (isYAxisTextDefined ? yAxisLastTickWidth + minYAxisGMargin : yAxisLastTickWidth * 2 ); + const yTranslation = chartTitleTextOffset; + // We have to offset the same xTranslation in negative diretion here + xAxisG.attr('transform', `translate(${(xAxisXTranslation) * -1}, ${lineHeight/2})`); yAxisG - .attr('transform', `translate(${xTranslation}, ${yTranslation})`); + .attr('transform', `translate(${yAxisXTranslation}, ${yTranslation})`); //Sets the axes titles on resize chartText .attr('x', width/2 ) @@ -171,17 +239,16 @@ H5P.Chart.LineChart = (function () { xAxisTitle .attr('x', width/2 ) - .attr('y', h); + .attr('y', h-2); yAxisTitle .attr('x', height/2) .attr('y', 0); - var xAxisGTexts = svg.selectAll('g.x-axis g.tick'); //Used for positioning/translating the X axis ticks to be in the middle of each bar xAxisGTexts.attr('transform', function(d, i) { var x; - var y = chartTextDefined ? chartTitleTextOffset: 40; + var y = chartTitleTextOffset; if(isYAxisTextDefined) { x = xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth; y += height; @@ -193,12 +260,13 @@ H5P.Chart.LineChart = (function () { return 'translate (' + x + ', ' + y +')'; } }); - - - var firstXaxisTick = xAxisG.select('.tick'); + //Needs to be here, because it's now been placed at its final position var firstXaxisTickXPos = d3.transform(firstXaxisTick.attr("transform")).translate[0]; - var firstXaxisTickWidth = firstXaxisTick[0][0].getBoundingClientRect().width; - g.attr('transform', 'translate(' + (firstXaxisTickXPos - firstXaxisTickWidth )+ ',' + (chartTextDefined ? chartTitleTextOffset : 40) + ')'); + + /*To set the position of the lines we first take x pos of first tick, subtract the x translation of the x axis + and then, since origo of the circle element is top left of irs bounding box, we subtract the half of the circle radius*/ + var lineXPos = firstXaxisTickXPos - xAxisXTranslation - (circeRadius/2) + lineGroup.attr('transform', 'translate(' + lineXPos + ',' + chartTitleTextOffset + ')'); //Apply line positions after the scales have changed on resize line.x(function(d,i) {return xScale(i);}) @@ -215,6 +283,10 @@ H5P.Chart.LineChart = (function () { // 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); + }; } From 7fa832089e470f76c8e83cb30260b4d870c8aea7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Thu, 11 Mar 2021 14:02:26 +0100 Subject: [PATCH 25/45] fixed bar resizing, added tabbing to bars --- chart.css | 4 +-- extendedBar.js | 82 ++++++++++++++++++++++++++++++-------------------- 2 files changed, 52 insertions(+), 34 deletions(-) diff --git a/chart.css b/chart.css index f5e0a1dd..da0f3d9d 100644 --- a/chart.css +++ b/chart.css @@ -41,8 +41,8 @@ font-size: 1.2em; } -.h5p-chart circle:focus { - outline: black 2px solid; +.h5p-chart circle:focus, .h5p-chart .bar:focus { + outline: dodgerblue 2px solid; } .h5p-chart .line-path { diff --git a/extendedBar.js b/extendedBar.js index 376970d7..2d53ac4e 100644 --- a/extendedBar.js +++ b/extendedBar.js @@ -20,6 +20,9 @@ H5P.Chart.ExtendedBarChart = (function () { 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)); @@ -46,7 +49,8 @@ H5P.Chart.ExtendedBarChart = (function () { .append('svg'); svg.append('desc').html('chart'); - + svg.attr("aria-label", "Line chart, title: " + ariaChartText + + ", X axis title: " + ariaXaxisText + ", Y axis text: " + ariaYaxisText); // Create x axis var xAxisG = svg.append('g') .attr('class', 'x-axis'); @@ -65,6 +69,11 @@ H5P.Chart.ExtendedBarChart = (function () { .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; @@ -82,10 +91,12 @@ H5P.Chart.ExtendedBarChart = (function () { 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 @@ -125,55 +136,47 @@ H5P.Chart.ExtendedBarChart = (function () { var lineHeight = (1.25 * fontSize); var xTickSize = (fontSize * 0.125); var xAxisRectOffset = lineHeight * 3; - var chartTitleTextHeight = svg.select('.chart-title')[0][0].getBoundingClientRect().height; - var chartTitleTextOffset = chartTitleTextHeight + lineHeight; // 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) - (chartTextDefined ? chartTitleTextOffset : 20); // Add space for labels below, and also the chart title + //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; // 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 * 2) - (chartTextDefined ? chartTitleTextOffset : 20); + height = h - xTickSize - (lineHeight * 4) - chartTitleTextOffset; } - // Update SVG size svg.attr('width', width) .attr('height', h); + // 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.attr('transform', 'translate(0,0)').call(xAxis); - //A lot of conditional moving here. If Y axis text is defined, we translate 40 px in the X direction. In the Y direction we translate downward the by current chartTitle height and line height - yAxisG - .attr('transform', 'translate(' + (isYAxisTextDefined ? 40 : 10) + ',' + (chartTextDefined ? chartTitleTextOffset : 20) + ')'); + xAxis.tickSize([0]); + xAxisG.call(xAxis); + var firstXaxisTick = xAxisG.select('.tick'); + var firstXaxisTickWidth = firstXaxisTick[0][0].getBoundingClientRect().width; 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; - // Move rectangles (bars) - rects.attr('x', function(d, i) { - //if Y Axis title is defined lets make space for Y Axis title by adding the lineheight times 2, to each bar position, and the width of the last, and presumably longest, tick text width - if(isYAxisTextDefined) { - return xScale(i) + xAxisRectOffset + yAxisLastTickWidth; - } else { - return xScale(i) + lineHeight + yAxisLastTickWidth; - } - }).attr('y', function(d) { - //If chart text is defined, add the height of the svg chart text and the lineheight to offsett the rects on the y - return chartTextDefined ? yScale(d.value) + chartTitleTextOffset : 20 + yScale(d.value); - }).attr('width', xScale.rangeBand()) - .attr('height', function(d) { - return height - yScale(d.value) ; - }); - + //A lot of conditional moving here. + const xAxisXTranslation = (isYAxisTextDefined ? firstXaxisTickWidth / 2 : 0 ); + var minYAxisGMargin = 20; + const yAxisXTranslation = (isYAxisTextDefined ? yAxisLastTickWidth + minYAxisGMargin : yAxisLastTickWidth * 2 ); + const yTranslation = chartTitleTextOffset; + // We have to offset the same xTranslation in negative diretion here + xAxisG.attr('transform', `translate(${(xAxisXTranslation) * -1}, ${lineHeight/2})`); + yAxisG + .attr('transform', `translate(${yAxisXTranslation}, ${yTranslation})`); //Sets the axes titles on resize chartText .attr('x', width/2 ) @@ -181,17 +184,18 @@ H5P.Chart.ExtendedBarChart = (function () { xAxisTitle .attr('x', width/2 ) - .attr('y', h); + .attr('y', h-2); yAxisTitle .attr('x', height/2) .attr('y', 0); - var xAxisGTexts = svg.selectAll('g.x-axis g.tick'); + // Move rectangles (bars) + //Used for positioning/translating the X axis ticks to be in the middle of each bar xAxisGTexts.attr('transform', function(d, i) { var x; - var y = chartTextDefined ? chartTitleTextOffset: 20; + var y = chartTitleTextOffset; if(isYAxisTextDefined) { x = xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth; y += height; @@ -203,8 +207,22 @@ H5P.Chart.ExtendedBarChart = (function () { return 'translate (' + x + ', ' + y +')'; } }); + var firstXaxisTickXPos = d3.transform(firstXaxisTick.attr("transform")).translate[0]; - + rects.attr('x', function(d, i) { + //if Y Axis title is defined lets make space for Y Axis title by adding the lineheight times 2, to each bar position, and the width of the last, and presumably longest, tick text width + if(isYAxisTextDefined) { + return xScale(i) +firstXaxisTickXPos / 2; + } else { + return xScale(i) + firstXaxisTickXPos; + } + }).attr('y', function(d) { + //If chart text is defined, add the height of the svg chart text and the lineheight to offsett the rects on the y + return yScale(d.value) + chartTitleTextOffset; + }).attr('width', xScale.rangeBand()) + .attr('height', function(d) { + return height - yScale(d.value) ; + }); // Re-locate text value labels texts.attr('x', function(d, i) { if(isYAxisTextDefined) { From 7ee2870adf698d0090bd8c8d1fbb270a1545dd46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Thu, 11 Mar 2021 17:02:38 +0100 Subject: [PATCH 26/45] fix bar graph alignment and resize issue --- extendedBar.js | 46 +++++++++++++++++++++------------------------- 1 file changed, 21 insertions(+), 25 deletions(-) diff --git a/extendedBar.js b/extendedBar.js index 2d53ac4e..054ca2d7 100644 --- a/extendedBar.js +++ b/extendedBar.js @@ -49,7 +49,7 @@ H5P.Chart.ExtendedBarChart = (function () { .append('svg'); svg.append('desc').html('chart'); - svg.attr("aria-label", "Line chart, title: " + ariaChartText + + svg.attr("aria-label", "Bar chart, title: " + ariaChartText + ", X axis title: " + ariaXaxisText + ", Y axis text: " + ariaYaxisText); // Create x axis var xAxisG = svg.append('g') @@ -64,8 +64,11 @@ H5P.Chart.ExtendedBarChart = (function () { var key = function (d) { return dataSet.indexOf(d); }; + var rectGroup = svg.append("g") + .attr("class", "rect-group"); + // Create rectangles for bars - var rects = svg.selectAll('rect') + var rects = rectGroup.selectAll('rect') .data(dataSet, key) .enter() .append('rect') @@ -168,15 +171,15 @@ H5P.Chart.ExtendedBarChart = (function () { //Gets width of last Y Axis tick text element var yAxisLastTickWidth = yAxisTicksText[yAxisTicksText.length-1].getBoundingClientRect().width; - //A lot of conditional moving here. - const xAxisXTranslation = (isYAxisTextDefined ? firstXaxisTickWidth / 2 : 0 ); var minYAxisGMargin = 20; - const yAxisXTranslation = (isYAxisTextDefined ? yAxisLastTickWidth + minYAxisGMargin : yAxisLastTickWidth * 2 ); + + const yAxisXTranslation = (isYAxisTextDefined ? yAxisLastTickWidth + minYAxisGMargin : yAxisLastTickWidth); + const yTranslation = chartTitleTextOffset; - // We have to offset the same xTranslation in negative diretion here - xAxisG.attr('transform', `translate(${(xAxisXTranslation) * -1}, ${lineHeight/2})`); + + xAxisG.attr('transform', `translate(${yAxisXTranslation + minYAxisGMargin + xScale.rangeBand()/2}, ${lineHeight/2})`); yAxisG - .attr('transform', `translate(${yAxisXTranslation}, ${yTranslation})`); + .attr('transform', `translate(${yAxisXTranslation + lineHeight}, ${yTranslation})`); //Sets the axes titles on resize chartText .attr('x', width/2 ) @@ -191,31 +194,22 @@ H5P.Chart.ExtendedBarChart = (function () { var xAxisGTexts = svg.selectAll('g.x-axis g.tick'); // Move rectangles (bars) - //Used for positioning/translating the X axis ticks to be in the middle of each bar xAxisGTexts.attr('transform', function(d, i) { var x; var y = chartTitleTextOffset; - if(isYAxisTextDefined) { - x = xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth; - y += height; - return 'translate (' + x + ', ' + y +')'; - } - else { - x = xScale(i) + xScale.rangeBand() / 2 + lineHeight + yAxisLastTickWidth; + + x = xScale(i) ; y += height; return 'translate (' + x + ', ' + y +')'; - } + }); - var firstXaxisTickXPos = d3.transform(firstXaxisTick.attr("transform")).translate[0]; + + rectGroup.attr('transform', `translate(${yAxisXTranslation + lineHeight}, ${0})`); rects.attr('x', function(d, i) { //if Y Axis title is defined lets make space for Y Axis title by adding the lineheight times 2, to each bar position, and the width of the last, and presumably longest, tick text width - if(isYAxisTextDefined) { - return xScale(i) +firstXaxisTickXPos / 2; - } else { - return xScale(i) + firstXaxisTickXPos; - } + return xScale(i); }).attr('y', function(d) { //If chart text is defined, add the height of the svg chart text and the lineheight to offsett the rects on the y return yScale(d.value) + chartTitleTextOffset; @@ -223,17 +217,19 @@ H5P.Chart.ExtendedBarChart = (function () { .attr('height', function(d) { return height - yScale(d.value) ; }); + // Re-locate text value labels texts.attr('x', function(d, i) { if(isYAxisTextDefined) { //Offset a bt more if the Y Axis text is defined - return xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth;} + return xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth; + } else { return xScale(i) + xScale.rangeBand() / 2 + lineHeight + yAxisLastTickWidth; } }).attr('y', function(d) { //Add more room with a ternary if chart text is defined - return height - lineHeight + (chartTextDefined ? chartTitleTextOffset : 20); + return height - lineHeight + chartTitleTextOffset; }); // Hide ticks from screen readers, the entire rectangle is already labelled From c930f732fbff434e31341ae7166ba1f727eeee17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Thu, 11 Mar 2021 17:11:23 +0100 Subject: [PATCH 27/45] cleaned x axis group setting --- line.js | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/line.js b/line.js index e33a8ac4..4e3ff2ba 100644 --- a/line.js +++ b/line.js @@ -224,14 +224,13 @@ H5P.Chart.LineChart = (function () { var yAxisLastTickWidth = yAxisTicksText[yAxisTicksText.length-1].getBoundingClientRect().width; //A lot of conditional moving here. - const xAxisXTranslation = (isYAxisTextDefined ? firstXaxisTickWidth / 2 : 0 ); var minYAxisGMargin = 20; - const yAxisXTranslation = (isYAxisTextDefined ? yAxisLastTickWidth + minYAxisGMargin : yAxisLastTickWidth * 2 ); + const xTranslation = (isYAxisTextDefined ? yAxisLastTickWidth + minYAxisGMargin : yAxisLastTickWidth * 2 ); const yTranslation = chartTitleTextOffset; // We have to offset the same xTranslation in negative diretion here - xAxisG.attr('transform', `translate(${(xAxisXTranslation) * -1}, ${lineHeight/2})`); + xAxisG.attr('transform', `translate(${xTranslation + minYAxisGMargin}, ${lineHeight/2})`); yAxisG - .attr('transform', `translate(${yAxisXTranslation}, ${yTranslation})`); + .attr('transform', `translate(${xTranslation}, ${yTranslation})`); //Sets the axes titles on resize chartText .attr('x', width/2 ) @@ -245,27 +244,21 @@ H5P.Chart.LineChart = (function () { .attr('y', 0); var xAxisGTexts = svg.selectAll('g.x-axis g.tick'); - //Used for positioning/translating the X axis ticks to be in the middle of each bar xAxisGTexts.attr('transform', function(d, i) { var x; var y = chartTitleTextOffset; - if(isYAxisTextDefined) { - x = xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth; + x = xScale(i); y += height; return 'translate (' + x + ', ' + y +')'; - } - else { - x = xScale(i) + xScale.rangeBand() / 2 + lineHeight + yAxisLastTickWidth; - y += height; - return 'translate (' + x + ', ' + y +')'; - } + }); + //Needs to be here, because it's now been placed at its final position var firstXaxisTickXPos = d3.transform(firstXaxisTick.attr("transform")).translate[0]; /*To set the position of the lines we first take x pos of first tick, subtract the x translation of the x axis and then, since origo of the circle element is top left of irs bounding box, we subtract the half of the circle radius*/ - var lineXPos = firstXaxisTickXPos - xAxisXTranslation - (circeRadius/2) + var lineXPos = firstXaxisTickXPos + firstXaxisTickWidth lineGroup.attr('transform', 'translate(' + lineXPos + ',' + chartTitleTextOffset + ')'); //Apply line positions after the scales have changed on resize From dc8cea1048916c8c93621cc13a78c079a6af27cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Thu, 11 Mar 2021 17:15:27 +0100 Subject: [PATCH 28/45] cleaned up xAxis group translation var setting --- extendedBar.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/extendedBar.js b/extendedBar.js index 054ca2d7..e7b5bd2f 100644 --- a/extendedBar.js +++ b/extendedBar.js @@ -173,13 +173,13 @@ H5P.Chart.ExtendedBarChart = (function () { var minYAxisGMargin = 20; - const yAxisXTranslation = (isYAxisTextDefined ? yAxisLastTickWidth + minYAxisGMargin : yAxisLastTickWidth); + const xTranslation = (isYAxisTextDefined ? yAxisLastTickWidth + minYAxisGMargin : yAxisLastTickWidth); const yTranslation = chartTitleTextOffset; - xAxisG.attr('transform', `translate(${yAxisXTranslation + minYAxisGMargin + xScale.rangeBand()/2}, ${lineHeight/2})`); + xAxisG.attr('transform', `translate(${xTranslation + minYAxisGMargin + xScale.rangeBand()/2}, ${lineHeight/2})`); yAxisG - .attr('transform', `translate(${yAxisXTranslation + lineHeight}, ${yTranslation})`); + .attr('transform', `translate(${xTranslation + lineHeight}, ${yTranslation})`); //Sets the axes titles on resize chartText .attr('x', width/2 ) @@ -205,7 +205,7 @@ H5P.Chart.ExtendedBarChart = (function () { }); - rectGroup.attr('transform', `translate(${yAxisXTranslation + lineHeight}, ${0})`); + rectGroup.attr('transform', `translate(${xTranslation + lineHeight}, ${0})`); rects.attr('x', function(d, i) { //if Y Axis title is defined lets make space for Y Axis title by adding the lineheight times 2, to each bar position, and the width of the last, and presumably longest, tick text width From e93d089223defe5cde6d288d919ac64f9a539d19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Thu, 11 Mar 2021 20:14:43 +0100 Subject: [PATCH 29/45] added some comments for explaining som vars --- extendedBar.js | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/extendedBar.js b/extendedBar.js index e7b5bd2f..615b9e6b 100644 --- a/extendedBar.js +++ b/extendedBar.js @@ -64,6 +64,7 @@ H5P.Chart.ExtendedBarChart = (function () { var key = function (d) { return dataSet.indexOf(d); }; + //rectGroup is for grouping the bars in var rectGroup = svg.append("g") .attr("class", "rect-group"); @@ -161,20 +162,21 @@ H5P.Chart.ExtendedBarChart = (function () { xAxis.tickSize([0]); xAxisG.call(xAxis); - var firstXaxisTick = xAxisG.select('.tick'); - var firstXaxisTickWidth = firstXaxisTick[0][0].getBoundingClientRect().width; + yAxisG.call(yAxis .tickSize(-width, 0, 0) .ticks(getSmartTicks(d3.max(dataSet).value).count)); - //Gets all text element from the Y Axis + //Gets first text element from the Y Axis var yAxisTicksText = yAxisG.selectAll('g.tick text')[0]; - //Gets width of last Y Axis tick text element + //Gets width of last Y Axis tick text elements var yAxisLastTickWidth = yAxisTicksText[yAxisTicksText.length-1].getBoundingClientRect().width; var minYAxisGMargin = 20; + //x translateion differs from when the y axis title text is defined const xTranslation = (isYAxisTextDefined ? yAxisLastTickWidth + minYAxisGMargin : yAxisLastTickWidth); + // Y translation used for y axis tick group const yTranslation = chartTitleTextOffset; xAxisG.attr('transform', `translate(${xTranslation + minYAxisGMargin + xScale.rangeBand()/2}, ${lineHeight/2})`); @@ -192,27 +194,23 @@ H5P.Chart.ExtendedBarChart = (function () { .attr('x', height/2) .attr('y', 0); var xAxisGTexts = svg.selectAll('g.x-axis g.tick'); - // Move rectangles (bars) - //Used for positioning/translating the X axis ticks to be in the middle of each bar xAxisGTexts.attr('transform', function(d, i) { var x; var y = chartTitleTextOffset; - - x = xScale(i) ; + x = xScale(i); y += height; return 'translate (' + x + ', ' + y +')'; }); +//positioning the rectgroup + rectGroup.attr('transform', `translate(${xTranslation + lineHeight}, ${chartTitleTextOffset})`); - rectGroup.attr('transform', `translate(${xTranslation + lineHeight}, ${0})`); - + //rects are already inside the rectGroup, so we need to position them rects.attr('x', function(d, i) { - //if Y Axis title is defined lets make space for Y Axis title by adding the lineheight times 2, to each bar position, and the width of the last, and presumably longest, tick text width return xScale(i); }).attr('y', function(d) { - //If chart text is defined, add the height of the svg chart text and the lineheight to offsett the rects on the y - return yScale(d.value) + chartTitleTextOffset; + return yScale(d.value); }).attr('width', xScale.rangeBand()) .attr('height', function(d) { return height - yScale(d.value) ; @@ -221,14 +219,12 @@ H5P.Chart.ExtendedBarChart = (function () { // Re-locate text value labels texts.attr('x', function(d, i) { if(isYAxisTextDefined) { - //Offset a bt more if the Y Axis text is defined return xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth; } else { return xScale(i) + xScale.rangeBand() / 2 + lineHeight + yAxisLastTickWidth; } }).attr('y', function(d) { - //Add more room with a ternary if chart text is defined return height - lineHeight + chartTitleTextOffset; }); From 4a8859da95342e67ccc5a8dbf129b3df45eb34f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Thu, 11 Mar 2021 20:23:04 +0100 Subject: [PATCH 30/45] removed some old comments in line.js --- line.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/line.js b/line.js index 4e3ff2ba..9b96689c 100644 --- a/line.js +++ b/line.js @@ -223,11 +223,10 @@ H5P.Chart.LineChart = (function () { //Gets width of last Y Axis tick text element var yAxisLastTickWidth = yAxisTicksText[yAxisTicksText.length-1].getBoundingClientRect().width; - //A lot of conditional moving here. var minYAxisGMargin = 20; const xTranslation = (isYAxisTextDefined ? yAxisLastTickWidth + minYAxisGMargin : yAxisLastTickWidth * 2 ); const yTranslation = chartTitleTextOffset; - // We have to offset the same xTranslation in negative diretion here + xAxisG.attr('transform', `translate(${xTranslation + minYAxisGMargin}, ${lineHeight/2})`); yAxisG .attr('transform', `translate(${xTranslation}, ${yTranslation})`); @@ -256,8 +255,7 @@ H5P.Chart.LineChart = (function () { //Needs to be here, because it's now been placed at its final position var firstXaxisTickXPos = d3.transform(firstXaxisTick.attr("transform")).translate[0]; - /*To set the position of the lines we first take x pos of first tick, subtract the x translation of the x axis - and then, since origo of the circle element is top left of irs bounding box, we subtract the half of the circle radius*/ + var lineXPos = firstXaxisTickXPos + firstXaxisTickWidth lineGroup.attr('transform', 'translate(' + lineXPos + ',' + chartTitleTextOffset + ')'); From 5d183a2fa64579aedfdfd8d9303eb38bb2ec837f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Thu, 11 Mar 2021 20:26:52 +0100 Subject: [PATCH 31/45] bumped patchversion --- library.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/library.json b/library.json index 0b3cb430..5f0e7656 100644 --- a/library.json +++ b/library.json @@ -3,7 +3,7 @@ "description": "Create different charts", "majorVersion": 1, "minorVersion": 2, - "patchVersion": 19, + "patchVersion": 20, "runnable": 1, "author": "Joubel", "license": "MIT", From 3c8bc4ef4bbc5b6c9e1b4fee14f61ad65bab8d27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Fri, 12 Mar 2021 10:26:21 +0100 Subject: [PATCH 32/45] fixed line chart offsett issue --- line.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/line.js b/line.js index 9b96689c..e3eac195 100644 --- a/line.js +++ b/line.js @@ -105,7 +105,6 @@ H5P.Chart.LineChart = (function () { if(d3.event.keyCode === 9 && isShowingTooltip ){ onCircleExit(this); } - if(d3.event.keyCode === 9 && !isShowingTooltip){ onCircleEnter(d,i, this); } @@ -121,7 +120,6 @@ H5P.Chart.LineChart = (function () { { onCircleEnter(d,i, this); } - }) .on("mouseout", function(d) { // Animates exit animation for hover exit @@ -224,7 +222,7 @@ H5P.Chart.LineChart = (function () { var yAxisLastTickWidth = yAxisTicksText[yAxisTicksText.length-1].getBoundingClientRect().width; var minYAxisGMargin = 20; - const xTranslation = (isYAxisTextDefined ? yAxisLastTickWidth + minYAxisGMargin : yAxisLastTickWidth * 2 ); + const xTranslation = (isYAxisTextDefined ? yAxisLastTickWidth + minYAxisGMargin : yAxisLastTickWidth + lineHeight ); const yTranslation = chartTitleTextOffset; xAxisG.attr('transform', `translate(${xTranslation + minYAxisGMargin}, ${lineHeight/2})`); @@ -252,11 +250,7 @@ H5P.Chart.LineChart = (function () { }); - //Needs to be here, because it's now been placed at its final position - var firstXaxisTickXPos = d3.transform(firstXaxisTick.attr("transform")).translate[0]; - - - var lineXPos = firstXaxisTickXPos + firstXaxisTickWidth + var lineXPos = xTranslation + minYAxisGMargin lineGroup.attr('transform', 'translate(' + lineXPos + ',' + chartTitleTextOffset + ')'); //Apply line positions after the scales have changed on resize From 2f9fa37b4d24466573532d564d99d5c2e3a24dae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Fri, 12 Mar 2021 10:52:07 +0100 Subject: [PATCH 33/45] added horizontal padding --- line.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/line.js b/line.js index e3eac195..1abad7d2 100644 --- a/line.js +++ b/line.js @@ -180,10 +180,10 @@ H5P.Chart.LineChart = (function () { * 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 width = parseFloat(style.width); + var horizontalPadding = parseFloat(style.width) / 16; + var width = parseFloat(style.width) - horizontalPadding ; var h = parseFloat(style.height); var fontSize = parseFloat(style.fontSize); var lineHeight = (1.25 * fontSize); @@ -198,7 +198,7 @@ H5P.Chart.LineChart = (function () { height = h - xTickSize - (lineHeight * 4) - chartTitleTextOffset; } // Update SVG size - svg.attr('width', width) + svg.attr('width', width + horizontalPadding) .attr('height', h); @@ -250,7 +250,7 @@ H5P.Chart.LineChart = (function () { }); - var lineXPos = xTranslation + minYAxisGMargin + var lineXPos = xTranslation + minYAxisGMargin; lineGroup.attr('transform', 'translate(' + lineXPos + ',' + chartTitleTextOffset + ')'); //Apply line positions after the scales have changed on resize From 41973bddc01a446da1de3f5d9acd28216802f831 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Fri, 12 Mar 2021 11:17:26 +0100 Subject: [PATCH 34/45] added horizontal padding, moved bar texts to top of bar, changed default font color --- extendedBar.js | 29 +++++++++++++++-------------- semantics.json | 4 ++-- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/extendedBar.js b/extendedBar.js index 615b9e6b..f7f29ada 100644 --- a/extendedBar.js +++ b/extendedBar.js @@ -109,7 +109,7 @@ H5P.Chart.ExtendedBarChart = (function () { .enter(); // Create inner rect labels - var texts = svg.selectAll('text') + var barTexts = svg.selectAll('text') .data(dataSet, key) .enter() .append('text') @@ -134,23 +134,25 @@ H5P.Chart.ExtendedBarChart = (function () { self.resize = function () { // Always scale to available space var style = window.getComputedStyle($wrapper[0]); - var width = parseFloat(style.width); - var h = parseFloat(style.height); + 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; // Takes the height of the text element and adds line height, so we always have som space under the title + 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('width', width) - .attr('height', h); + svg.attr('width', width + horizontalPadding) + .attr('height', h + verticalPadding); // Update scales @@ -196,11 +198,9 @@ H5P.Chart.ExtendedBarChart = (function () { 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 x = xScale(i); + var y = chartTitleTextOffset + height; + return `translate (${x}, ${y})`; }); //positioning the rectgroup @@ -208,7 +208,7 @@ H5P.Chart.ExtendedBarChart = (function () { //rects are already inside the rectGroup, so we need to position them rects.attr('x', function(d, i) { - return xScale(i); + return xScale(i); }).attr('y', function(d) { return yScale(d.value); }).attr('width', xScale.rangeBand()) @@ -216,8 +216,9 @@ H5P.Chart.ExtendedBarChart = (function () { return height - yScale(d.value) ; }); + var offsetFromBar = 5; // Re-locate text value labels - texts.attr('x', function(d, i) { + barTexts.attr('x', function(d, i) { if(isYAxisTextDefined) { return xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth; } @@ -225,7 +226,7 @@ H5P.Chart.ExtendedBarChart = (function () { return xScale(i) + xScale.rangeBand() / 2 + lineHeight + yAxisLastTickWidth; } }).attr('y', function(d) { - return height - lineHeight + chartTitleTextOffset; + return yScale(d.value) + chartTitleTextOffset - offsetFromBar; }); // Hide ticks from screen readers, the entire rectangle is already labelled diff --git a/semantics.json b/semantics.json index 5690f10c..549136a9 100644 --- a/semantics.json +++ b/semantics.json @@ -85,7 +85,7 @@ "widget": "colorSelector", "label": "Font Color", "importance": "low", - "default": "#fff", + "default": "#2f2f2f", "optional": true, "spectrum": { "showInput": true, @@ -207,7 +207,7 @@ "label": "Override text color for chart", "description": "Defines a new color for all text in bars.", "importance": "low", - "default": "#fff", + "default": "#2f2f2f", "optional": true, "spectrum": { From ece74bffa2b02707fb73fb103004d0dfc0c27f6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Fri, 12 Mar 2021 11:19:38 +0100 Subject: [PATCH 35/45] Update line.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sindre Bøyum --- line.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/line.js b/line.js index 1abad7d2..ba562262 100644 --- a/line.js +++ b/line.js @@ -182,7 +182,7 @@ H5P.Chart.LineChart = (function () { self.resize = function () { // Always scale to available space var style = window.getComputedStyle($wrapper[0]); - var horizontalPadding = parseFloat(style.width) / 16; + var horizontalPadding = parseFloat(style.width) / 16; var width = parseFloat(style.width) - horizontalPadding ; var h = parseFloat(style.height); var fontSize = parseFloat(style.fontSize); From ea5dfbb78ce446521aae83bd746b2ef302bcc908 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Fri, 12 Mar 2021 16:40:18 +0100 Subject: [PATCH 36/45] bumped patchnumber and added support for showWhen widget when chart is used without course-presentation --- library.json | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/library.json b/library.json index 5f0e7656..c8ac9890 100644 --- a/library.json +++ b/library.json @@ -3,7 +3,7 @@ "description": "Create different charts", "majorVersion": 1, "minorVersion": 2, - "patchVersion": 20, + "patchVersion": 21, "runnable": 1, "author": "Joubel", "license": "MIT", @@ -45,6 +45,9 @@ "machineName": "H5PEditor.ColorSelector", "majorVersion": 1, "minorVersion": 2 - } + }, + { "machineName": "H5PEditor.ShowWhen", + "majorVersion": 1, + "minorVersion": 0 } ] } From b7170994f60e0293b40ef874c8aa78dae799b58f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Mon, 15 Mar 2021 12:47:05 +0100 Subject: [PATCH 37/45] fixed height issue when tooletip text height is defined by external style sheet --- line.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/line.js b/line.js index ba562262..91e88f14 100644 --- a/line.js +++ b/line.js @@ -54,7 +54,7 @@ H5P.Chart.LineChart = (function () { .attr('class', 'y-axis') .attr('aria-label', H5P.t()) - svg.on("mouseleave", function() { + svg.on("mouseleavse", function() { if(isShowingTooltip) { onCircleExit(); } @@ -124,8 +124,7 @@ H5P.Chart.LineChart = (function () { .on("mouseout", function(d) { // Animates exit animation for hover exit d3.select(this).transition().duration(200) - .attr("r", circeRadius) - .style("font-size", 12); + .attr("r", circeRadius); }); function onCircleEnter(d,i, thisCircle) { @@ -151,17 +150,22 @@ H5P.Chart.LineChart = (function () { .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.5)) + ')'); + 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 textHeight ;}) + .attr("y", function() { return rectHeight/2;}) .attr("id", "value-" + i) .text(function() { return d.value;}); + + console.log((rectWidth - textWidth)) isShowingTooltip = true; } @@ -191,7 +195,7 @@ H5P.Chart.LineChart = (function () { 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; // Takes the height of the text element and adds line height, so we always have som space under the title + 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) { From 860446d05817f37524d8e4c874d8c8d6cf705c24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Mon, 15 Mar 2021 12:48:17 +0100 Subject: [PATCH 38/45] css styling for fixing height issue when tooletip text height is defined by external style sheet --- chart.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/chart.css b/chart.css index da0f3d9d..13e89537 100644 --- a/chart.css +++ b/chart.css @@ -36,10 +36,7 @@ fill: black; opacity: 0.7; } -.h5p-chart .text-node { - fill: white; - font-size: 1.2em; -} + .h5p-chart circle:focus, .h5p-chart .bar:focus { outline: dodgerblue 2px solid; @@ -67,6 +64,11 @@ .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; } From 9bd137073376316bc5bfa46b4048f69289844d5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Mon, 15 Mar 2021 14:23:56 +0100 Subject: [PATCH 39/45] fixed minor hover issue --- line.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/line.js b/line.js index 91e88f14..f1a0c043 100644 --- a/line.js +++ b/line.js @@ -54,7 +54,7 @@ H5P.Chart.LineChart = (function () { .attr('class', 'y-axis') .attr('aria-label', H5P.t()) - svg.on("mouseleavse", function() { + svg.on("mouseleave", function() { if(isShowingTooltip) { onCircleExit(); } From 4438e635bd0f3d40e4a997f48be49410f0b7743e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Mon, 15 Mar 2021 15:29:16 +0100 Subject: [PATCH 40/45] fixed issue with bar text label alignment --- extendedBar.js | 19 ++++++++++--------- library.json | 2 +- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/extendedBar.js b/extendedBar.js index f7f29ada..85f0005c 100644 --- a/extendedBar.js +++ b/extendedBar.js @@ -109,14 +109,16 @@ H5P.Chart.ExtendedBarChart = (function () { .enter(); // Create inner rect labels - var barTexts = svg.selectAll('text') + var barTexts = rectGroup + .selectAll('text') .data(dataSet, key) .enter() .append('text') + .attr('text-anchor', 'middless') .text(function(d) { return d.value; }) - .attr('text-anchor', 'middle') + .attr('text-anchor', 'middless') .attr('fill', function (d) { if(params.overrideColorGroup && params.overrideColorGroup.overrideChartColorsTick ){ return params.overrideColorGroup.overrideChartColorText; @@ -218,17 +220,16 @@ H5P.Chart.ExtendedBarChart = (function () { var offsetFromBar = 5; // Re-locate text value labels + barTexts.attr('x', function(d, i) { - if(isYAxisTextDefined) { - return xScale(i) + xScale.rangeBand() / 2 + xAxisRectOffset + yAxisLastTickWidth; - } - else { - return xScale(i) + xScale.rangeBand() / 2 + lineHeight + yAxisLastTickWidth; - } + var barTextWidth = this.getBoundingClientRect().width; + return xScale(i) + xScale.rangeBand() / 2 - barTextWidth / 2; + }).attr('y', function(d) { - return yScale(d.value) + chartTitleTextOffset - offsetFromBar; + return yScale(d.value) - offsetFromBar; }); + // Hide ticks from screen readers, the entire rectangle is already labelled xAxisG.selectAll('text').attr('aria-hidden', true); }; diff --git a/library.json b/library.json index c8ac9890..e41b497e 100644 --- a/library.json +++ b/library.json @@ -3,7 +3,7 @@ "description": "Create different charts", "majorVersion": 1, "minorVersion": 2, - "patchVersion": 21, + "patchVersion": 22, "runnable": 1, "author": "Joubel", "license": "MIT", From 5fe2954922a57bcd4bf656a6f1e55b059a49a436 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Tue, 16 Mar 2021 12:21:47 +0100 Subject: [PATCH 41/45] fixed vertical padding on line chart, made correction on yaxis title padding --- extendedBar.js | 4 ++-- line.js | 18 +++++++++--------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/extendedBar.js b/extendedBar.js index 85f0005c..3932f476 100644 --- a/extendedBar.js +++ b/extendedBar.js @@ -176,9 +176,9 @@ H5P.Chart.ExtendedBarChart = (function () { 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 + minYAxisGMargin : yAxisLastTickWidth); + const xTranslation = (isYAxisTextDefined ? yAxisLastTickWidth + yAxisTitleWidth + minYAxisGMargin : yAxisLastTickWidth); // Y translation used for y axis tick group const yTranslation = chartTitleTextOffset; diff --git a/line.js b/line.js index f1a0c043..74e59c22 100644 --- a/line.js +++ b/line.js @@ -187,8 +187,9 @@ H5P.Chart.LineChart = (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); + var h = parseFloat(style.height) - verticalPadding; var fontSize = parseFloat(style.fontSize); var lineHeight = (1.25 * fontSize); var xTickSize = (fontSize * 0.125); @@ -203,7 +204,7 @@ H5P.Chart.LineChart = (function () { } // Update SVG size svg.attr('width', width + horizontalPadding) - .attr('height', h); + .attr('height', h + verticalPadding); // Update scales @@ -215,8 +216,7 @@ H5P.Chart.LineChart = (function () { xAxis.tickSize([0]); xAxisG.call(xAxis); - var firstXaxisTick = xAxisG.select('.tick'); - var firstXaxisTickWidth = firstXaxisTick[0][0].getBoundingClientRect().width; + yAxisG.call(yAxis .tickSize(-width, 0, 0) .ticks(getSmartTicks(d3.max(dataSet).value).count)); @@ -224,9 +224,9 @@ H5P.Chart.LineChart = (function () { 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; - const xTranslation = (isYAxisTextDefined ? yAxisLastTickWidth + minYAxisGMargin : yAxisLastTickWidth + lineHeight ); + 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})`); @@ -248,9 +248,9 @@ H5P.Chart.LineChart = (function () { xAxisGTexts.attr('transform', function(d, i) { var x; var y = chartTitleTextOffset; - x = xScale(i); - y += height; - return 'translate (' + x + ', ' + y +')'; + x = xScale(i); + y += height; + return 'translate (' + x + ', ' + y +')'; }); From ee9b472746db23df3f098477866257105c85f27b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Edvard=20Pires=20Bj=C3=B8rgen?= Date: Wed, 17 Mar 2021 10:18:29 +0100 Subject: [PATCH 42/45] fixed font sizing --- chart.css | 5 ++--- library.json | 2 +- line.js | 4 ++-- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/chart.css b/chart.css index 13e89537..e4087205 100644 --- a/chart.css +++ b/chart.css @@ -1,9 +1,8 @@ .h5p-chart svg { display: block; margin: 0 auto; -} -.h5p-chart-chart { - font-size: 0.75em; + font-size: 12px; + font-size: min(16px, 0.9em); } .h5p-chart-bar { width: 100%; diff --git a/library.json b/library.json index e41b497e..1f16bc8d 100644 --- a/library.json +++ b/library.json @@ -3,7 +3,7 @@ "description": "Create different charts", "majorVersion": 1, "minorVersion": 2, - "patchVersion": 22, + "patchVersion": 23, "runnable": 1, "author": "Joubel", "license": "MIT", diff --git a/line.js b/line.js index 74e59c22..6f7198c7 100644 --- a/line.js +++ b/line.js @@ -44,7 +44,7 @@ H5P.Chart.LineChart = (function () { var svg = d3.select($wrapper[0]) .append('svg') - svg.append('desc').html('chart') + svg.append('desc').html('chart'); // Create x axis var xAxisG = svg.append('g') @@ -52,7 +52,7 @@ H5P.Chart.LineChart = (function () { var yAxisG = svg.append('g') .attr('class', 'y-axis') - .attr('aria-label', H5P.t()) + .attr('aria-label', H5P.t()); svg.on("mouseleave", function() { if(isShowingTooltip) { From cac84e9466166dd803e3bee95ce3cbf9c11dd5b4 Mon Sep 17 00:00:00 2001 From: EivinS Date: Tue, 22 Jun 2021 11:39:10 +0200 Subject: [PATCH 43/45] adding color palette to charts --- library.json | 2 +- semantics.json | 45 +++++++++++++++++++++++++++++++++++---------- 2 files changed, 36 insertions(+), 11 deletions(-) diff --git a/library.json b/library.json index 1f16bc8d..06fc45d6 100644 --- a/library.json +++ b/library.json @@ -3,7 +3,7 @@ "description": "Create different charts", "majorVersion": 1, "minorVersion": 2, - "patchVersion": 23, + "patchVersion": 24, "runnable": 1, "author": "Joubel", "license": "MIT", diff --git a/semantics.json b/semantics.json index 549136a9..cfa7de4c 100644 --- a/semantics.json +++ b/semantics.json @@ -75,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"] + ] } }, { @@ -88,8 +93,13 @@ "default": "#2f2f2f", "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"] + ] } } ] @@ -196,8 +206,13 @@ "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"] + ] } }, { @@ -211,8 +226,13 @@ "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"] + ] } } ] @@ -243,8 +263,13 @@ "importance": "low", "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"] + ] } } ] From 4e3a9c745df47cc7f4b4b0b52eba0e0c62361b2e Mon Sep 17 00:00:00 2001 From: EivinS Date: Tue, 22 Jun 2021 14:38:44 +0200 Subject: [PATCH 44/45] making every chart-type scale by default --- bar.js | 3 +-- chart.css | 2 ++ extendedBar.js | 4 +--- library.json | 2 +- line.js | 4 +--- pie.js | 3 +-- 6 files changed, 7 insertions(+), 11 deletions(-) diff --git a/bar.js b/bar.js index 28057dc7..ed9923e5 100644 --- a/bar.js +++ b/bar.js @@ -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); diff --git a/chart.css b/chart.css index e4087205..9ae9b5d6 100644 --- a/chart.css +++ b/chart.css @@ -3,6 +3,8 @@ margin: 0 auto; font-size: 12px; font-size: min(16px, 0.9em); + width: 100%; + height: 100%; } .h5p-chart-bar { width: 100%; diff --git a/extendedBar.js b/extendedBar.js index 3932f476..6ca8e008 100644 --- a/extendedBar.js +++ b/extendedBar.js @@ -153,9 +153,7 @@ H5P.Chart.ExtendedBarChart = (function () { height = h - xTickSize - (lineHeight * 4) - chartTitleTextOffset; } // Update SVG size - svg.attr('width', width + horizontalPadding) - .attr('height', h + verticalPadding); - + 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 diff --git a/library.json b/library.json index 06fc45d6..68b05c3c 100644 --- a/library.json +++ b/library.json @@ -3,7 +3,7 @@ "description": "Create different charts", "majorVersion": 1, "minorVersion": 2, - "patchVersion": 24, + "patchVersion": 25, "runnable": 1, "author": "Joubel", "license": "MIT", diff --git a/line.js b/line.js index 6f7198c7..6d90eb46 100644 --- a/line.js +++ b/line.js @@ -203,9 +203,7 @@ H5P.Chart.LineChart = (function () { height = h - xTickSize - (lineHeight * 4) - chartTitleTextOffset; } // Update SVG size - svg.attr('width', width + horizontalPadding) - .attr('height', h + verticalPadding); - + 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 diff --git a/pie.js b/pie.js index 068d27d0..c58a2f25 100644 --- a/pie.js +++ b/pie.js @@ -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) { From ab4bcb203c285f7cacf7def5efcadcaf20a24b38 Mon Sep 17 00:00:00 2001 From: Oliver Tacke Date: Fri, 12 Jan 2024 11:57:17 +0100 Subject: [PATCH 45/45] Properly fork to NDLAChart --- bar.js | 2 +- chart.js | 4 ++-- extendedBar.js | 2 +- library.json | 9 +++++---- line.js | 2 +- pie.js | 2 +- semantics.json | 4 ++-- upgrades.js | 2 +- 8 files changed, 14 insertions(+), 13 deletions(-) diff --git a/bar.js b/bar.js index ed9923e5..c2e1b9a6 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. diff --git a/chart.js b/chart.js index b4a6cf5c..cbf240a0 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. @@ -124,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 index 6ca8e008..4383dd8a 100644 --- a/extendedBar.js +++ b/extendedBar.js @@ -1,5 +1,5 @@ /*global d3*/ -H5P.Chart.ExtendedBarChart = (function () { +H5P.NDLAChart.ExtendedBarChart = (function () { /** * Creates a bar chart from the given data set. diff --git a/library.json b/library.json index 68b05c3c..932508c2 100644 --- a/library.json +++ b/library.json @@ -1,5 +1,5 @@ { - "title": "Chart", + "title": "Chart (NDLA)", "description": "Create different charts", "majorVersion": 1, "minorVersion": 2, @@ -7,7 +7,7 @@ "runnable": 1, "author": "Joubel", "license": "MIT", - "machineName": "H5P.Chart", + "machineName": "H5P.NDLAChart", "coreApi": { "majorVersion": 1, "minorVersion": 21 @@ -44,10 +44,11 @@ { "machineName": "H5PEditor.ColorSelector", "majorVersion": 1, - "minorVersion": 2 + "minorVersion": 3 }, { "machineName": "H5PEditor.ShowWhen", "majorVersion": 1, - "minorVersion": 0 } + "minorVersion": 0 + } ] } diff --git a/line.js b/line.js index 6d90eb46..9abd6bb8 100644 --- a/line.js +++ b/line.js @@ -1,7 +1,7 @@ /*global d3*/ -H5P.Chart.LineChart = (function () { +H5P.NDLAChart.LineChart = (function () { /** * Creates a line chart from the given data set. diff --git a/pie.js b/pie.js index c58a2f25..09b48421 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. diff --git a/semantics.json b/semantics.json index cfa7de4c..9ddc1932 100644 --- a/semantics.json +++ b/semantics.json @@ -90,7 +90,7 @@ "widget": "colorSelector", "label": "Font Color", "importance": "low", - "default": "#2f2f2f", + "default": "#ffffff", "optional": true, "spectrum": { "showPalette": true, @@ -222,7 +222,7 @@ "label": "Override text color for chart", "description": "Defines a new color for all text in bars.", "importance": "low", - "default": "#2f2f2f", + "default": "#ffffff", "optional": true, "spectrum": { diff --git a/upgrades.js b/upgrades.js index 7fb037e0..d1466667 100644 --- a/upgrades.js +++ b/upgrades.js @@ -1,6 +1,6 @@ var H5PUpgrades = H5PUpgrades || {}; -H5PUpgrades['H5P.Chart'] = (function () { +H5PUpgrades['H5P.NDLAChart'] = (function () { return { 1: {