From 96d0118e50efca2ffc58cd7d6dbf53e5b303621f Mon Sep 17 00:00:00 2001 From: Hamza Elhamdadi Date: Mon, 24 Jul 2023 13:32:13 -0400 Subject: [PATCH] fixed some color bugs in the tooltip for both line and bar charts --- bar_chart/js/main.js | 18 +++++++++--------- bar_chart/js/stacked_bar_chart.js | 2 +- line_chart/js/complex_line_chart.js | 20 ++++++++++---------- line_chart/js/main.js | 18 +++++++++--------- 4 files changed, 29 insertions(+), 29 deletions(-) diff --git a/bar_chart/js/main.js b/bar_chart/js/main.js index 56509f1..56065d8 100644 --- a/bar_chart/js/main.js +++ b/bar_chart/js/main.js @@ -93,12 +93,12 @@ function getBarChartData(props) { // // // -let props = { - complexity: 'complex', - doTour: false, - showSource: true, - changes: true, - showCovidData: false, - allowInteraction: true -} -getBarChartData(props) +// let props = { +// complexity: 'moderate', +// doTour: true, +// showSource: true, +// changes: true, +// showCovidData: true, +// allowInteraction: true +// } +// getBarChartData(props) diff --git a/bar_chart/js/stacked_bar_chart.js b/bar_chart/js/stacked_bar_chart.js index ec28400..cca8e8b 100644 --- a/bar_chart/js/stacked_bar_chart.js +++ b/bar_chart/js/stacked_bar_chart.js @@ -220,7 +220,7 @@ ${number_format(d.data.Age_adjusted_unvax_IR)}
${vis.rlabels[1]}: - ${number_format(d.data.Age_adjusted_vax_IR)} + ${number_format(d.data.Age_adjusted_vax_IR)}
` : `Week: ${d.Max_Week_Date2}
Year: ${yearFormat(d.Max_Week_Date)}
diff --git a/line_chart/js/complex_line_chart.js b/line_chart/js/complex_line_chart.js index 154fec8..260e8c1 100644 --- a/line_chart/js/complex_line_chart.js +++ b/line_chart/js/complex_line_chart.js @@ -105,9 +105,9 @@ class LineChart { d.append('div').attr('class', 'legend-label').text(vis.rlabels[i]) }) } else { - vac.append('div').attr('class', 'legend-value').append('svg').attr('id', "vacced").append('rect').style('fill', "orange") + vac.append('div').attr('class', 'legend-value').append('svg').attr('id', "vacced").append('rect').style('fill', "#ef701b") vac.append('div').attr('class', 'legend-label').text(vis.rlabels[0]); - unv.append('div').attr('class', 'legend-value').append('svg').attr('id', "vacced").append('rect').style('fill', "blue") + unv.append('div').attr('class', 'legend-value').append('svg').attr('id', "vacced").append('rect').style('fill', "#0984ea") unv.append('div').attr('class', 'legend-label').text(vis.rlabels[1]) } @@ -382,7 +382,7 @@ class LineChart { vis.svg.append("path") .datum(vis.data) .attr("fill", "none") - .attr("stroke", "orange") + .attr("stroke", "#ef701b") .attr("stroke-width", 3.5) .attr("d", d3.line() .x(function (d) { @@ -397,7 +397,7 @@ class LineChart { vis.svg.append("path") .datum(vis.data) .attr("fill", "none") - .attr("stroke", "blue") + .attr("stroke", "#0984ea") .attr("stroke-width", 3.5) .attr("stroke-dasharray", ("4, 4")) .attr("d", d3.line() @@ -414,7 +414,7 @@ class LineChart { vis.svg.append("path") .datum(vis.data) .attr("fill", "none") - .attr("stroke", "orange") + .attr("stroke", "#ef701b") .attr("stroke-width", 3.5) .attr("d", d3.line() .x(function (d) { @@ -429,7 +429,7 @@ class LineChart { vis.svg.append("path") .datum(vis.data) .attr("fill", "none") - .attr("stroke", "blue") + .attr("stroke", "#0984ea") .attr("stroke-width", 3.5) .attr("stroke-dasharray", ("4, 4")) .attr("d", d3.line() @@ -726,7 +726,7 @@ class LineChart { .attr("y", (this.complexity == 'complex' && this.allow_interaction) ? 60 : 30) .attr("font-family", "Segoe UI") .attr('font-size', '14px') - .style("fill", "black") + .style("fill", this.complexity == 'complex' ? 'black' : "#ef701b") .attr('font-weight', 'bold') .style("font-size", '12px'); @@ -734,7 +734,7 @@ class LineChart { .attr("class", "tooltip-text") .attr("x", 10) .attr("y", (this.complexity == 'complex' && this.allow_interaction) ? 80 : 45) - .style("fill", (this.complexity == 'complex' && this.allow_interaction) ? "#9e3a26" : "orange") + .style("fill", (this.complexity == 'complex' && this.allow_interaction) ? "#9e3a26" : "#ef701b") .attr("font-family", "Segoe UI") .style("font-size", '11px'); @@ -759,7 +759,7 @@ class LineChart { .attr("class", "tooltip-text") .attr("x", 10) .attr("y", (this.complexity == 'complex' && this.allow_interaction) ? 160 : 70) - .style("fill", "black") + .style("fill", this.complexity == 'complex' ? 'black' : "#0984ea") .attr('font-weight', 'bold') .attr("font-family", "Segoe UI") .style("font-size", '11px'); @@ -768,7 +768,7 @@ class LineChart { .attr("class", "tooltip-text") .attr("x", 10) .attr("y", (this.complexity == 'complex' && this.allow_interaction) ? 180 : 85) - .style("fill", (this.complexity == 'complex' && this.allow_interaction) ? "#04386b" : "blue") + .style("fill", (this.complexity == 'complex' && this.allow_interaction) ? "#04386b" : "#0984ea") .attr("font-family", "Segoe UI") .style("font-size", '11px'); diff --git a/line_chart/js/main.js b/line_chart/js/main.js index 76523a0..dc89277 100644 --- a/line_chart/js/main.js +++ b/line_chart/js/main.js @@ -86,12 +86,12 @@ function getLineChartData(props) { }); } -let props = { - complexity: 'moderate', - doTour: false, - showSource: true, - changes: true, - showCovidData: false, - allowInteraction: true -}; -getLineChartData(props); +// let props = { +// complexity: 'simple', +// doTour: false, +// showSource: true, +// changes: true, +// showCovidData: false, +// allowInteraction: true +// }; +// getLineChartData(props);