Skip to content

Commit d9e861f

Browse files
sam-ctrlsam-ctrl
authored
Merge pull request #348 from ONSdigital/economist-ticks
Economist style ticks
2 parents be7514a + b136113 commit d9e861f

File tree

30 files changed

+1393
-201
lines changed

30 files changed

+1393
-201
lines changed

‎area-stacked-sm/script.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ d3.csv(config.graphicDataURL)
235235

236236
// );
237237
graphicData.forEach((d) => {
238-
d.date = d3.timeParse(config.dateFormat)(d.date);
238+
d.date = d3.utcParse(config.dateFormat)(d.date);
239239
});
240240

241241
//use pym to create iframed chart dependent on specified variables

‎area-stacked/script.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ function drawGraphic() {
162162
d3.csv(config.graphicDataURL).then((rawData) => {
163163
graphicData = rawData.map((d) => {
164164
return {
165-
date: d3.timeParse(config.dateFormat)(d.date),
165+
date: d3.utcParse(config.dateFormat)(d.date),
166166
...Object.entries(d)
167167
.filter(([key]) => key !== 'date')
168168
.map(([key, value]) => [key, +value])

‎column-chart-ci-bands/config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,11 @@ config = {
4949
"md": 4,
5050
"lg": 2
5151
},
52+
"labelSpans": {
53+
enabled: true,
54+
timeUnit:"day",//set to "day","month",'quarter' or 'year'
55+
secondaryTimeUnit:"auto",//can be 'auto', false to disable or override with "day","month",'quarter' or 'year'
56+
},
5257
"yAxisTicks": {
5358
"sm": 4,
5459
"md": 5,

‎column-chart-ci-bands/script.js‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { initialise, wrap, addSvg, addAxisLabel, addSource } from "../lib/helpers.js";
1+
import { initialise, wrap, addSvg, addAxisLabel, addSource, customTemporalAxis } from "../lib/helpers.js";
22

33
let graphic = d3.select('#graphic');
44
let pymChild = null;
@@ -73,16 +73,22 @@ function drawGraphic() {
7373
let xTime = d3.timeFormat(config.xAxisTickFormat[size])
7474

7575
//set up xAxis generator
76-
let xAxis = d3
77-
.axisBottom(x)
78-
.tickSize(10)
79-
.tickPadding(10)
80-
.tickValues(tickValues) //Labelling the first and/or last bar if needed
81-
.tickFormat((d) => {
82-
if (xDataType == 'date') return xTime(d);
83-
if (xDataType == 'numeric') return d3.format(config.xAxisNumberFormat)(d);
84-
return d; // categorical: just show the label
85-
});
76+
let xAxisGenerator;
77+
if (config.labelSpans.enabled === true && xDataType=="date") {
78+
xAxisGenerator = customTemporalAxis(x)
79+
.timeUnit(config.labelSpans.timeUnit)
80+
.tickSize(0)
81+
.tickPadding(6)
82+
.secondaryTimeUnit(config.labelSpans.secondaryTimeUnit);
83+
} else {
84+
xAxisGenerator = d3
85+
.axisBottom(x)
86+
.tickSize(10)
87+
.tickPadding(10)
88+
.tickValues(tickValues) //Labelling the first and/or last bar if needed
89+
.tickFormat((d) => xDataType == 'date' ? xTime(d)
90+
: d3.format(config.xAxisNumberFormat)(d));
91+
}
8692

8793
//create svg for chart
8894
svg = addSvg({
@@ -112,7 +118,7 @@ function drawGraphic() {
112118
.append('g')
113119
.attr('transform', 'translate(0,' + height + ')')
114120
.attr('class', 'x axis')
115-
.call(xAxis);
121+
.call(xAxisGenerator);
116122

117123
svg
118124
.append('g')
@@ -223,7 +229,7 @@ function drawGraphic() {
223229

224230
d3.csv(config.graphicDataURL)
225231
.then((data) => {
226-
let parseTime = d3.timeParse(config.dateFormat);
232+
let parseTime = d3.utcParse(config.dateFormat);
227233
//load chart data
228234
graphicData = data;
229235

‎column-chart-stacked-optional-line-sm/config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,15 @@ config = {
7373
md: 4,
7474
lg: 6,
7575
},
76+
addFirstDate: false,
77+
addFinalDate: false,
7678
legendColumns: 4,
7779
dropYAxis: true,
80+
labelSpans: {
81+
enabled: true,
82+
timeUnit:"month",//"day","month","year"
83+
secondaryTimeUnit: "auto",//"auto" or define "day","month","year". false to disable
84+
},
7885
elements: { select: 0, nav: 0, legend: 0, titles: 0 },
7986
chartBuild: {},
8087
};

‎column-chart-stacked-optional-line-sm/script.js‎

Lines changed: 35 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
diamondShape,
77
addChartTitleLabel,
88
addAxisLabel,
9+
customTemporalAxis
910
} from "../lib/helpers.js";
1011

1112
let graphic = d3.select("#graphic");
@@ -110,8 +111,8 @@ function drawGraphic() {
110111
config.dropYAxis !== true
111112
? d3.format(config.yAxisTickFormat)(d)
112113
: chartPosition == 0
113-
? d3.format(config.yAxisTickFormat)(d)
114-
: ""
114+
? d3.format(config.yAxisTickFormat)(d)
115+
: ""
115116
);
116117

117118
// Use stackColumns for the stack instead of filtering out lineSeries
@@ -126,44 +127,37 @@ function drawGraphic() {
126127

127128
let xTime = d3.timeFormat(config.xAxisTickFormat[size]);
128129

129-
//set up xAxis generator
130-
const xAxis = d3
131-
.axisBottom(x)
132-
.tickSize(10)
133-
.tickPadding(10)
134-
.tickValues(
135-
xDataType == "date"
136-
? graphic_data
137-
.map(function (d) {
138-
return d.date.getTime();
139-
}) //just get dates as seconds past unix epoch
140-
.filter(function (d, i, arr) {
141-
return arr.indexOf(d) == i;
142-
}) //find unique
143-
.map(function (d) {
144-
return new Date(d);
145-
}) //map back to dates
146-
.sort(function (a, b) {
147-
return a - b;
148-
})
149-
.filter(function (d, i) {
150-
return (
151-
(i % config.xAxisTicksEvery[size] === 0 &&
152-
i <= graphic_data.length - config.xAxisTicksEvery[size]) ||
153-
i == data.length - 1
154-
); //Rob's fussy comment about labelling the last date
155-
})
156-
: x.domain().filter((d, i) => {
157-
return (
158-
(i % config.xAxisTicksEvery[size] === 0 &&
159-
i <= graphic_data.length - config.xAxisTicksEvery[size]) ||
160-
i == data.length - 1
161-
);
162-
})
163-
)
164-
.tickFormat((d) =>
165-
xDataType == "date" ? xTime(d) : d3.format(config.xAxisNumberFormat)(d)
166-
);
130+
let xAxis;
131+
132+
let tickValues = x.domain().filter(function (d, i) {
133+
return !(i % config.xAxisTicksEvery[size]);
134+
});
135+
136+
//Labelling the first and/or last bar if needed
137+
if (config.addFirstDate == true) {
138+
tickValues.push(domain[0]);
139+
}
140+
141+
if (config.addFinalDate == true) {
142+
tickValues.push(domain[domain.length - 1]);
143+
}
144+
145+
if (config.labelSpans.enabled === true && xDataType == "date") {
146+
xAxis = customTemporalAxis(x)
147+
.timeUnit(config.labelSpans.timeUnit)
148+
.tickSize(0)
149+
.tickPadding(6)
150+
.secondaryTimeUnit(config.labelSpans.secondaryTimeUnit);
151+
} else {
152+
xAxis = d3
153+
.axisBottom(x)
154+
.tickSize(10)
155+
.tickPadding(10)
156+
.tickValues(tickValues)
157+
.tickFormat((d) =>
158+
xDataType == "date" ? xTime(d) : d3.format(config.xAxisNumberFormat)(d)
159+
);
160+
}
167161

168162
//create svg for chart
169163
const svg = addSvg({
@@ -405,7 +399,7 @@ d3.csv(config.graphicDataUrl).then((data) => {
405399
//load chart data
406400
graphic_data = data;
407401

408-
let parseTime = d3.timeParse(config.dateFormat);
402+
let parseTime = d3.utcParse(config.dateFormat);
409403

410404
data.forEach((d, i) => {
411405
//If the date column is has date data store it as dates

‎column-chart-stacked-optional-line/config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,12 @@ config = {
6969
},
7070
addFirstDate: false,
7171
addFinalDate: false,
72+
labelSpans: {
73+
enabled: true,
74+
timeUnit:"month",//set to "day","month",'quarter' or 'year'
75+
secondaryTimeUnit: 'quarter',//can be 'auto', false to disable or override with "day","month",'quarter' or 'year'
76+
yearStartMonth:0,//0 indexed so year starts in Jan
77+
},
7278
elements: { select: 0, nav: 0, legend: 0, titles: 0 },
7379
chartBuild: {},
7480
};

‎column-chart-stacked-optional-line/data.csv‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,3 @@ Dec-20,0.055,0.024,-0.004,0.052,0.09
1414
Jan-21,0.088,0.083,-0.042,0.017,-0.061
1515
Feb-21,0.056,0.043,-0.086,-0.083,0.098
1616
Mar-21,0.041,0.057,-0.065,0.057,0.036
17-
Apr-21,0.033,-0.057,0.004,0.02,0.022

‎column-chart-stacked-optional-line/script.js‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import {
44
addSvg,
55
diamondShape,
66
addAxisLabel,
7+
customTemporalAxis,
8+
quarterYearFormatter
79
} from "../lib/helpers.js";
810

911
let graphic = d3.select("#graphic");
@@ -69,14 +71,24 @@ function drawGraphic() {
6971
}
7072

7173
//set up xAxis generator
72-
let xAxis = d3
73-
.axisBottom(x)
74-
.tickSize(10)
75-
.tickPadding(10)
76-
.tickValues(tickValues)
77-
.tickFormat((d) =>
78-
xDataType == "date" ? xTime(d) : d3.format(config.xAxisNumberFormat)(d)
79-
);
74+
let xAxis;
75+
if (config.labelSpans.enabled === true && xDataType == "date") {
76+
xAxis = customTemporalAxis(x)
77+
.timeUnit(config.labelSpans.timeUnit)
78+
.tickSize(0)
79+
.tickPadding(6)
80+
.secondaryTimeUnit(config.labelSpans.secondaryTimeUnit)
81+
.secondaryTickFormat(d => quarterYearFormatter(d, config.labelSpans.yearStartMonth))
82+
} else {
83+
xAxis = d3
84+
.axisBottom(x)
85+
.tickSize(10)
86+
.tickPadding(10)
87+
.tickValues(tickValues)
88+
.tickFormat((d) =>
89+
xDataType == "date" ? xTime(d) : d3.format(config.xAxisNumberFormat)(d)
90+
);
91+
}
8092

8193
// Determine which columns to use for stacked bars based on line toggle
8294
let stackColumns;
@@ -318,7 +330,7 @@ d3.csv(config.graphicDataUrl).then((data) => {
318330
//load chart data
319331
graphic_data = data;
320332

321-
let parseTime = d3.timeParse(config.dateFormat);
333+
let parseTime = d3.utcParse(config.dateFormat);
322334

323335
data.forEach((d, i) => {
324336
//If the date column is has date data store it as dates

‎column-chart/config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,5 +53,12 @@ config = {
5353
},
5454
"addFirstDate": false,
5555
"addFinalDate": false,
56+
"labelSpans":{
57+
"enabled":true,
58+
timeUnit:"month",//set to "day","month",'quarter' or 'year'
59+
secondaryTimeUnit:"auto",//can be 'auto', false to disable or override with "day","month",'quarter' or 'year'
60+
yearStartMonth:3,//0 indexed so the year start in April
61+
prefix:"FY ",//prefix for secondary label
62+
},
5663
"elements": { "select": 0, "nav": 0, "legend": 0, "titles": 0 }
5764
};

0 commit comments

Comments
 (0)