From 0988b51343356ffe4d703898552189c5276c062a Mon Sep 17 00:00:00 2001 From: nrennie <42338476+nrennie@users.noreply.github.com> Date: Thu, 25 Jun 2026 11:47:32 +0100 Subject: [PATCH 1/5] Add first/last date config --- line-chart-with-ci-area-sm/config.js | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/line-chart-with-ci-area-sm/config.js b/line-chart-with-ci-area-sm/config.js index c9a7c03..3e5cf6f 100644 --- a/line-chart-with-ci-area-sm/config.js +++ b/line-chart-with-ci-area-sm/config.js @@ -17,9 +17,9 @@ config = { // "lineCurveType": "curveCardinal", // Cardinal spline curve // "lineCurveType": "curveCatmullRom" // Catmull-Rom spline curve // "lineCurveType": "curveMonotoneX" // Monotone spline curve - "xDomain": [-13, 25], + "xDomain": "auto", // either "auto" or an array for the x domain e.g. [0,2000] - DOES NOT WORK - "yDomainMax": "auto", + "yDomainMax": "auto", // Y-axis maximum options: // "auto" - Smart mode: uses data max with 10% padding if positive, or 0 if all data is negative. // Automatically trims excessive whitespace below zero (>50% of range) while keeping 30% cushion above highest data point. @@ -75,6 +75,14 @@ config = { }, "chartGap": 20, // New tick config + "addFirstDate": false, + "addFinalDate": false, + "labelSpans": { + "enabled": false, + timeUnit: 'year',//set to "day","month",'quarter' or 'year' + secondaryTimeUnit: 'auto',//can be 'auto' or false to disable. set to "day","month",'quarter' or 'year' to override + forceFullLastPrimaryUnit: false,//extends the axis to the end of the last primary time unit + }, "xAxisTickMethod": "total", // "interval" or "total" "xAxisTickCount": { // for "total" method "sm": 2, @@ -94,13 +102,6 @@ config = { "md": 5, "lg": 8 }, - "labelSpans": { - "enabled": true, - timeUnit: 'year',//set to "day","month",'quarter' or 'year' - secondaryTimeUnit: 'auto',//can be 'auto' or false to disable. set to "day","month",'quarter' or 'year' to override - forceFullLastPrimaryUnit: false,//extends the axis to the end of the last primary time unit - }, "dropYAxis": true, - "addEndMarkers": true, // true = always show, false = never show, "auto" = show only at sm size - "elements": { "select": 0, "nav": 0, "legend": 1, "titles": 0 } + "addEndMarkers": true // true = always show, false = never show, "auto" = show only at sm size }; From d8a7bf4746f72b7c71b90aeb866bef53f3d17e34 Mon Sep 17 00:00:00 2001 From: nrennie <42338476+nrennie@users.noreply.github.com> Date: Thu, 25 Jun 2026 11:47:40 +0100 Subject: [PATCH 2/5] remove .essential --- line-chart-with-ci-area-sm/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/line-chart-with-ci-area-sm/script.js b/line-chart-with-ci-area-sm/script.js index 40fb16d..460474d 100644 --- a/line-chart-with-ci-area-sm/script.js +++ b/line-chart-with-ci-area-sm/script.js @@ -33,7 +33,7 @@ function drawGraphic() { .attr('class', 'chart-container'); const chartEvery = config.chartEvery[size]; - const chartGap = config.optional?.chartGap || 10; + const chartGap = config?.chartGap || 10; const baseMargin = { ...config.margin[size] }; const sharedChartWidth = calculateChartWidth({ screenWidth: parseInt(graphic.style('width')), From e4475d64a1ff099b60bb75aa06828e335fde855b Mon Sep 17 00:00:00 2001 From: nrennie <42338476+nrennie@users.noreply.github.com> Date: Thu, 25 Jun 2026 11:51:13 +0100 Subject: [PATCH 3/5] Remove .optional from other scripts --- area-stacked-sm/script.js | 2 +- bar-chart-clustered-sm/script.js | 2 +- bar-chart-sm/script.js | 2 +- line-chart-sm-focus/script.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/area-stacked-sm/script.js b/area-stacked-sm/script.js index a3e6289..5541b46 100644 --- a/area-stacked-sm/script.js +++ b/area-stacked-sm/script.js @@ -26,7 +26,7 @@ function drawGraphic() { // Set dimensions let margin = { ...config.margin[size] }; - let chartGap = config.optional?.chartGap || 10; + let chartGap = config?.chartGap || 10; // Calculate chart width here let chartWidth = calculateChartWidth({ diff --git a/bar-chart-clustered-sm/script.js b/bar-chart-clustered-sm/script.js index 89ee97d..60f81d5 100644 --- a/bar-chart-clustered-sm/script.js +++ b/bar-chart-clustered-sm/script.js @@ -64,7 +64,7 @@ function drawGraphic() { let chartPosition = chartIndex % chartsPerRow; let margin = { ...config.margin[size] }; - let chartGap = config.optional?.chartGap || 10; + let chartGap = config?.chartGap || 10; let chartWidth = calculateChartWidth({ screenWidth: parseInt(graphic.style('width')), diff --git a/bar-chart-sm/script.js b/bar-chart-sm/script.js index 4765c83..83aae2e 100644 --- a/bar-chart-sm/script.js +++ b/bar-chart-sm/script.js @@ -40,7 +40,7 @@ function drawGraphic() { let chartPosition = chartIndex % chartsPerRow; let margin = { ...config.margin[size] }; - let chartGap = config.optional?.chartGap || 10; + let chartGap = config?.chartGap || 10; let chartWidth = calculateChartWidth({ screenWidth: parseInt(graphic.style('width')), diff --git a/line-chart-sm-focus/script.js b/line-chart-sm-focus/script.js index 2e79471..d95c310 100644 --- a/line-chart-sm-focus/script.js +++ b/line-chart-sm-focus/script.js @@ -38,7 +38,7 @@ function drawGraphic() { // Set dimensions let margin = { ...config.margin[size] }; - let chartGap = config.optional?.chartGap || 10; + let chartGap = config?.chartGap || 10; let chartWidth = calculateChartWidth({ screenWidth: parseInt(graphic.style('width')), From 166d6ee0c33749846c43f66f1d40dc4a5e3d88ff Mon Sep 17 00:00:00 2001 From: nrennie <42338476+nrennie@users.noreply.github.com> Date: Thu, 25 Jun 2026 11:52:51 +0100 Subject: [PATCH 4/5] Remove essential and optional from annot example --- z-annotation-column-example/config.js | 107 ++++++++++++-------------- z-annotation-column-example/script.js | 32 ++++---- 2 files changed, 67 insertions(+), 72 deletions(-) diff --git a/z-annotation-column-example/config.js b/z-annotation-column-example/config.js index 4e73734..830cede 100644 --- a/z-annotation-column-example/config.js +++ b/z-annotation-column-example/config.js @@ -1,63 +1,58 @@ config = { - "essential": { - "graphic_data_url": "data.csv", - "colour_palette": "#206095", - "sourceText": "Office for National Statistics", - "accessibleSummary": "Here is the screenreader text describing the chart.", - "xAxisTickFormat": { - "sm": "%Y", - "md": "%Y", - "lg": "%b-%y" - }, - "yAxisTickFormat": ".0%", - "xAxisNumberFormat": ".0f", - "dateFormat": "%b-%y", - //the format your date data has in data.csv - "yDomain": "auto", - // either "auto" or an array for the x domain e.g. [0,100] - "yAxisLabel": "y axis label" + "graphic_data_url": "data.csv", + "colour_palette": "#206095", + "sourceText": "Office for National Statistics", + "accessibleSummary": "Here is the screenreader text describing the chart.", + "xAxisTickFormat": { + "sm": "%Y", + "md": "%Y", + "lg": "%b-%y" }, - "optional": { - "margin": { - "sm": { - "top": 25, - "right": 20, - "bottom": 50, - "left": 70 - }, - "md": { - "top": 25, - "right": 20, - "bottom": 50, - "left": 70 - }, - "lg": { - "top": 25, - "right": 20, - "bottom": 50, - "left": 70 - } - }, - "aspectRatio": { - "sm": [1, 1], - "md": [1, 1], - "lg": [2, 1] - }, - "xAxisTicksEvery": { - "sm": 4, - "md": 4, - "lg": 2 + "yAxisTickFormat": ".0%", + "xAxisNumberFormat": ".0f", + "dateFormat": "%b-%y", + //the format your date data has in data.csv + "yDomain": "auto", + // either "auto" or an array for the x domain e.g. [0,100] + "yAxisLabel": "y axis label", + "margin": { + "sm": { + "top": 25, + "right": 20, + "bottom": 50, + "left": 70 }, - "yAxisTicks": { - "sm": 4, - "md": 8, - "lg": 10 + "md": { + "top": 25, + "right": 20, + "bottom": 50, + "left": 70 }, - "addFirstDate": false, - "addFinalDate": false, - "mobileBreakpoint": 510, - "mediumBreakpoint": 600 + "lg": { + "top": 25, + "right": 20, + "bottom": 50, + "left": 70 + } + }, + "aspectRatio": { + "sm": [1, 1], + "md": [1, 1], + "lg": [2, 1] + }, + "xAxisTicksEvery": { + "sm": 4, + "md": 4, + "lg": 2 + }, + "yAxisTicks": { + "sm": 4, + "md": 8, + "lg": 10 }, - "elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 }, + "addFirstDate": false, + "addFinalDate": false, + "mobileBreakpoint": 510, + "mediumBreakpoint": 600, "chart_build": {} }; diff --git a/z-annotation-column-example/script.js b/z-annotation-column-example/script.js index 84e2acd..0ae18e4 100644 --- a/z-annotation-column-example/script.js +++ b/z-annotation-column-example/script.js @@ -9,8 +9,8 @@ function drawGraphic() { //Set up some of the basics and return the size value ('sm', 'md' or 'lg') size = initialise(size, config); - const aspectRatio = config.optional.aspectRatio[size]; - let margin = config.optional.margin[size]; + const aspectRatio = config.aspectRatio[size]; + let margin = config.margin[size]; let chartWidth = parseInt(graphic.style('width')) - margin.left - margin.right; //height is set by the aspect ratio @@ -32,16 +32,16 @@ function drawGraphic() { x.domain([...new Set(graphic_data.map((d) => d.date))]); let tickValues = x.domain().filter(function (d, i) { - return !(i % config.optional.xAxisTicksEvery[size]) + return !(i % config.xAxisTicksEvery[size]) }); //Labelling the first and/or last bar if needed - if (config.optional.addFirstDate == true) { + if (config.addFirstDate == true) { tickValues.push(graphic_data[0].date) console.log("First date added") } - if (config.optional.addFinalDate == true) { + if (config.addFinalDate == true) { tickValues.push(graphic_data[graphic_data.length - 1].date) console.log("Last date added") } @@ -50,8 +50,8 @@ function drawGraphic() { let yAxis = d3.axisLeft(y) .tickSize(-chartWidth) .tickPadding(10) - .ticks(config.optional.yAxisTicks[size]) - .tickFormat(d3.format(config.essential.yAxisTickFormat)); + .ticks(config.yAxisTicks[size]) + .tickFormat(d3.format(config.yAxisTickFormat)); let xDataType; @@ -63,7 +63,7 @@ function drawGraphic() { // console.log(xDataType) - let xTime = d3.timeFormat(config.essential.xAxisTickFormat[size]) + let xTime = d3.timeFormat(config.xAxisTickFormat[size]) //set up xAxis generator let xAxis = d3 @@ -72,7 +72,7 @@ function drawGraphic() { .tickPadding(10) .tickValues(tickValues) //Labelling the first and/or last bar if needed .tickFormat((d) => xDataType == 'date' ? xTime(d) - : d3.format(config.essential.xAxisNumberFormat)(d)); + : d3.format(config.xAxisNumberFormat)(d)); //create svg for chart svg = addSvg({ @@ -82,7 +82,7 @@ function drawGraphic() { margin: margin }) - if (config.essential.yDomain == 'auto') { + if (config.yDomain == 'auto') { if (d3.min(graphic_data.map(({ value }) => Number(value))) >= 0) { y.domain([ 0, @@ -91,7 +91,7 @@ function drawGraphic() { y.domain(d3.extent(graphic_data.map(({ value }) => Number(value)))) } } else { - y.domain(config.essential.yDomain); + y.domain(config.yDomain); } svg @@ -121,7 +121,7 @@ function drawGraphic() { .attr('x', (d) => x(d.date)) .attr('height', (d) => Math.abs(y(d.value) - y(0))) .attr('width', x.bandwidth()) - .attr('fill', config.essential.colour_palette); + .attr('fill', config.colour_palette); // This does the y-axis label @@ -129,7 +129,7 @@ function drawGraphic() { svgContainer: svg, xPosition: 5 - margin.left, yPosition: -10, - text: config.essential.yAxisLabel, + text: config.yAxisLabel, textAnchor: "start", wrapWidth: chartWidth }); @@ -163,7 +163,7 @@ function drawGraphic() { }) //create link to source - addSource('source', config.essential.sourceText); + addSource('source', config.sourceText); //use pym to calculate chart dimensions if (pymChild) { @@ -171,11 +171,11 @@ function drawGraphic() { } } -d3.csv(config.essential.graphic_data_url).then((data) => { +d3.csv(config.graphic_data_url).then((data) => { //load chart data graphic_data = data; - let parseTime = d3.timeParse(config.essential.dateFormat); + let parseTime = d3.timeParse(config.dateFormat); data.forEach((d, i) => { From 1ab1ad6504bc5c2ef59dab7a0fe2f0254a02f9fa Mon Sep 17 00:00:00 2001 From: nrennie <42338476+nrennie@users.noreply.github.com> Date: Thu, 25 Jun 2026 11:55:39 +0100 Subject: [PATCH 5/5] Add first/last date --- line-chart-sm-multiseries/config.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/line-chart-sm-multiseries/config.js b/line-chart-sm-multiseries/config.js index e0edd7d..2364e71 100644 --- a/line-chart-sm-multiseries/config.js +++ b/line-chart-sm-multiseries/config.js @@ -81,6 +81,8 @@ config = { secondaryTimeUnit: 'auto',//can be 'auto' or false to disable. set to "day","month",'quarter' or 'year' to override forceFullLastPrimaryUnit: false,//extends the axis to the end of the last primary time unit }, + "addFirstDate": false, + "addFinalDate": false, "yAxisTicks": { "sm": 7, "md": 5,