From 59c234b60f647ae86a135813a1a8d5d1f9baad1f Mon Sep 17 00:00:00 2001 From: Michael Chadwick Date: Fri, 17 Jan 2025 11:18:11 -0800 Subject: [PATCH 1/3] added slice-color helper class --- ember-simple-charts/package.json | 5 +++-- ember-simple-charts/src/helpers/slice-color.js | 13 +++++++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 ember-simple-charts/src/helpers/slice-color.js diff --git a/ember-simple-charts/package.json b/ember-simple-charts/package.json index d10e86d4..d0b5cbbe 100644 --- a/ember-simple-charts/package.json +++ b/ember-simple-charts/package.json @@ -99,7 +99,8 @@ "./components/simple-chart-pie.js": "./dist/_app_/components/simple-chart-pie.js", "./components/simple-chart-tooltip.js": "./dist/_app_/components/simple-chart-tooltip.js", "./components/simple-chart-tree.js": "./dist/_app_/components/simple-chart-tree.js", - "./components/simple-chart.js": "./dist/_app_/components/simple-chart.js" + "./components/simple-chart.js": "./dist/_app_/components/simple-chart.js", + "./helpers/slice-color.js": "./dist/_app_/helpers/slice-color.js" } } -} \ No newline at end of file +} diff --git a/ember-simple-charts/src/helpers/slice-color.js b/ember-simple-charts/src/helpers/slice-color.js new file mode 100644 index 00000000..a00e8eb7 --- /dev/null +++ b/ember-simple-charts/src/helpers/slice-color.js @@ -0,0 +1,13 @@ +import { helper } from '@ember/component/helper'; + +export default helper(function sliceColor([data, color]) { + const rgb = color(data); + const parts = rgb.substr(4).split(')')[0].split(','); + const r = parseInt(parts[0], 16); + const g = parseInt(parts[1], 16); + const b = parseInt(parts[2], 16); + // Thanks to https://24ways.org/2010/calculating-color-contrast for this formula + const yiq = (r * 299 + g * 587 + b * 114) / 1000; + + return yiq >= 256 ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)'; +}); From c194b05cd16556ccedb3353811e15ba0f7805ebc Mon Sep 17 00:00:00 2001 From: Michael Chadwick Date: Fri, 17 Jan 2025 11:18:36 -0800 Subject: [PATCH 2/3] applied slice-color helper class to bar, donut, horz-bar, and pie chart types --- .../src/components/simple-chart-bar.js | 14 ++------------ .../src/components/simple-chart-donut.js | 16 ++++------------ .../src/components/simple-chart-horz-bar.js | 14 ++------------ .../src/components/simple-chart-pie.js | 14 ++------------ 4 files changed, 10 insertions(+), 48 deletions(-) diff --git a/ember-simple-charts/src/components/simple-chart-bar.js b/ember-simple-charts/src/components/simple-chart-bar.js index f6901fcc..e537bccf 100644 --- a/ember-simple-charts/src/components/simple-chart-bar.js +++ b/ember-simple-charts/src/components/simple-chart-bar.js @@ -4,6 +4,7 @@ import { select } from 'd3-selection'; import { scaleBand, scaleLinear, scaleSequential } from 'd3-scale'; import { interpolateSinebow } from 'd3-scale-chromatic'; import { modifier } from 'ember-modifier'; +import sliceColor from '../helpers/slice-color.js'; export default class SimpleChartBar extends Component { @tracked loading = true; @@ -51,18 +52,7 @@ export default class SimpleChartBar extends Component { .data(data) .enter() .append('text') - .style('color', (d) => { - const rgb = color(d.data); - //cut up rgb(1, 99, 245) into parts - const parts = rgb.substr(4).split(')')[0].split(','); - const r = parseInt(parts[0], 16); - const g = parseInt(parts[1], 16); - const b = parseInt(parts[2], 16); - //Thanks to https://24ways.org/2010/calculating-color-contrast for this formula - const yiq = (r * 299 + g * 587 + b * 114) / 1000; - - return yiq >= 256 ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)'; - }) + .style('color', (d) => sliceColor.compute([d.data, color])) .style('font-size', '.8rem') .attr('text-anchor', 'middle') .attr('x', (d) => `${xScale(d.label) + xScale.bandwidth() / 2}%`) diff --git a/ember-simple-charts/src/components/simple-chart-donut.js b/ember-simple-charts/src/components/simple-chart-donut.js index b7f96ec6..74a96c22 100644 --- a/ember-simple-charts/src/components/simple-chart-donut.js +++ b/ember-simple-charts/src/components/simple-chart-donut.js @@ -9,6 +9,7 @@ import { easeLinear } from 'd3-ease'; import { interpolate } from 'd3-interpolate'; import { TrackedAsyncData } from 'ember-async-data'; import { modifier } from 'ember-modifier'; +import sliceColor from '../helpers/slice-color.js'; export default class SimpleChartDonut extends Component { @tracked loadingPromise; @@ -70,11 +71,13 @@ export default class SimpleChartDonut extends Component { .innerRadius(radius - 32); svg.selectAll('.chart').remove(); + const chart = svg .append('g') .attr('class', 'chart') //move the donut into the center of the chart .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); + const path = chart .selectAll('.slice') .data(createPie(data)) @@ -103,18 +106,7 @@ export default class SimpleChartDonut extends Component { const text = chart .selectAll('.slice') .append('text') - .style('color', (d) => { - const rgb = color(d.data.data); - //cut up rgb(1, 99, 245) into parts - const parts = rgb.substr(4).split(')')[0].split(','); - const r = parseInt(parts[0], 16); - const g = parseInt(parts[1], 16); - const b = parseInt(parts[2], 16); - //Thanks to https://24ways.org/2010/calculating-color-contrast for this formula - const yiq = (r * 299 + g * 587 + b * 114) / 1000; - - return yiq >= 256 ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)'; - }) + .style('color', (d) => sliceColor.compute([d.data.data, color])) .style('font-size', '.8rem') .attr( 'transform', diff --git a/ember-simple-charts/src/components/simple-chart-horz-bar.js b/ember-simple-charts/src/components/simple-chart-horz-bar.js index df90501b..8ab1b91c 100644 --- a/ember-simple-charts/src/components/simple-chart-horz-bar.js +++ b/ember-simple-charts/src/components/simple-chart-horz-bar.js @@ -5,6 +5,7 @@ import { select } from 'd3-selection'; import { scaleBand, scaleLinear, scaleSequential } from 'd3-scale'; import { interpolateSinebow } from 'd3-scale-chromatic'; import { modifier } from 'ember-modifier'; +import sliceColor from '../helpers/slice-color.js'; export default class SimpleChartHorzBar extends Component { @tracked loading = true; @@ -52,18 +53,7 @@ export default class SimpleChartHorzBar extends Component { .data(data) .enter() .append('text') - .style('color', (d) => { - const rgb = color(d.data); - //cut up rgb(1, 99, 245) into parts - const parts = rgb.substr(4).split(')')[0].split(','); - const r = parseInt(parts[0], 16); - const g = parseInt(parts[1], 16); - const b = parseInt(parts[2], 16); - //Thanks to https://24ways.org/2010/calculating-color-contrast for this formula - const yiq = (r * 299 + g * 587 + b * 114) / 1000; - - return yiq >= 256 ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)'; - }) + .style('color', (d) => sliceColor.compute([d.data, color])) .style('font-size', '.8rem') .attr('text-anchor', 'end') .attr('text-align', 'right') diff --git a/ember-simple-charts/src/components/simple-chart-pie.js b/ember-simple-charts/src/components/simple-chart-pie.js index a8d8e88b..b931673f 100644 --- a/ember-simple-charts/src/components/simple-chart-pie.js +++ b/ember-simple-charts/src/components/simple-chart-pie.js @@ -9,6 +9,7 @@ import { easeLinear } from 'd3-ease'; import { interpolate } from 'd3-interpolate'; import { TrackedAsyncData } from 'ember-async-data'; import { modifier } from 'ember-modifier'; +import sliceColor from '../helpers/slice-color.js'; export default class SimpleChartPie extends Component { @tracked loadingPromise; @@ -100,18 +101,7 @@ export default class SimpleChartPie extends Component { const text = chart .selectAll('.slice') .append('text') - .style('color', (d) => { - const rgb = color(d.data.data); - //cut up rgb(1, 99, 245) into parts - const parts = rgb.substr(4).split(')')[0].split(','); - const r = parseInt(parts[0], 16); - const g = parseInt(parts[1], 16); - const b = parseInt(parts[2], 16); - //Thanks to https://24ways.org/2010/calculating-color-contrast for this formula - const yiq = (r * 299 + g * 587 + b * 114) / 1000; - - return yiq >= 256 ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)'; - }) + .style('color', (d) => sliceColor.compute([d.data.data, color])) .style('font-size', '.8rem') .attr( 'transform', From 579131212740be7e3d3d7a120947f9faa56a62fb Mon Sep 17 00:00:00 2001 From: Michael Chadwick Date: Fri, 17 Jan 2025 16:44:53 -0800 Subject: [PATCH 3/3] simplified helper down to a function in a utils file --- ember-simple-charts/package.json | 3 +-- ember-simple-charts/src/components/simple-chart-bar.js | 4 ++-- ember-simple-charts/src/components/simple-chart-donut.js | 4 ++-- ember-simple-charts/src/components/simple-chart-horz-bar.js | 4 ++-- ember-simple-charts/src/components/simple-chart-pie.js | 4 ++-- ember-simple-charts/src/{helpers => utils}/slice-color.js | 6 ++---- 6 files changed, 11 insertions(+), 14 deletions(-) rename ember-simple-charts/src/{helpers => utils}/slice-color.js (77%) diff --git a/ember-simple-charts/package.json b/ember-simple-charts/package.json index d0b5cbbe..1760b4b3 100644 --- a/ember-simple-charts/package.json +++ b/ember-simple-charts/package.json @@ -99,8 +99,7 @@ "./components/simple-chart-pie.js": "./dist/_app_/components/simple-chart-pie.js", "./components/simple-chart-tooltip.js": "./dist/_app_/components/simple-chart-tooltip.js", "./components/simple-chart-tree.js": "./dist/_app_/components/simple-chart-tree.js", - "./components/simple-chart.js": "./dist/_app_/components/simple-chart.js", - "./helpers/slice-color.js": "./dist/_app_/helpers/slice-color.js" + "./components/simple-chart.js": "./dist/_app_/components/simple-chart.js" } } } diff --git a/ember-simple-charts/src/components/simple-chart-bar.js b/ember-simple-charts/src/components/simple-chart-bar.js index e537bccf..056c2e64 100644 --- a/ember-simple-charts/src/components/simple-chart-bar.js +++ b/ember-simple-charts/src/components/simple-chart-bar.js @@ -4,7 +4,7 @@ import { select } from 'd3-selection'; import { scaleBand, scaleLinear, scaleSequential } from 'd3-scale'; import { interpolateSinebow } from 'd3-scale-chromatic'; import { modifier } from 'ember-modifier'; -import sliceColor from '../helpers/slice-color.js'; +import sliceColor from '../utils/slice-color.js'; export default class SimpleChartBar extends Component { @tracked loading = true; @@ -52,7 +52,7 @@ export default class SimpleChartBar extends Component { .data(data) .enter() .append('text') - .style('color', (d) => sliceColor.compute([d.data, color])) + .style('color', (d) => sliceColor(d.data, color)) .style('font-size', '.8rem') .attr('text-anchor', 'middle') .attr('x', (d) => `${xScale(d.label) + xScale.bandwidth() / 2}%`) diff --git a/ember-simple-charts/src/components/simple-chart-donut.js b/ember-simple-charts/src/components/simple-chart-donut.js index 74a96c22..71b6fd57 100644 --- a/ember-simple-charts/src/components/simple-chart-donut.js +++ b/ember-simple-charts/src/components/simple-chart-donut.js @@ -9,7 +9,7 @@ import { easeLinear } from 'd3-ease'; import { interpolate } from 'd3-interpolate'; import { TrackedAsyncData } from 'ember-async-data'; import { modifier } from 'ember-modifier'; -import sliceColor from '../helpers/slice-color.js'; +import sliceColor from '../utils/slice-color.js'; export default class SimpleChartDonut extends Component { @tracked loadingPromise; @@ -106,7 +106,7 @@ export default class SimpleChartDonut extends Component { const text = chart .selectAll('.slice') .append('text') - .style('color', (d) => sliceColor.compute([d.data.data, color])) + .style('color', (d) => sliceColor(d.data.data, color)) .style('font-size', '.8rem') .attr( 'transform', diff --git a/ember-simple-charts/src/components/simple-chart-horz-bar.js b/ember-simple-charts/src/components/simple-chart-horz-bar.js index 8ab1b91c..ae39508c 100644 --- a/ember-simple-charts/src/components/simple-chart-horz-bar.js +++ b/ember-simple-charts/src/components/simple-chart-horz-bar.js @@ -5,7 +5,7 @@ import { select } from 'd3-selection'; import { scaleBand, scaleLinear, scaleSequential } from 'd3-scale'; import { interpolateSinebow } from 'd3-scale-chromatic'; import { modifier } from 'ember-modifier'; -import sliceColor from '../helpers/slice-color.js'; +import sliceColor from '../utils/slice-color.js'; export default class SimpleChartHorzBar extends Component { @tracked loading = true; @@ -53,7 +53,7 @@ export default class SimpleChartHorzBar extends Component { .data(data) .enter() .append('text') - .style('color', (d) => sliceColor.compute([d.data, color])) + .style('color', (d) => sliceColor(d.data, color)) .style('font-size', '.8rem') .attr('text-anchor', 'end') .attr('text-align', 'right') diff --git a/ember-simple-charts/src/components/simple-chart-pie.js b/ember-simple-charts/src/components/simple-chart-pie.js index b931673f..27bb21d1 100644 --- a/ember-simple-charts/src/components/simple-chart-pie.js +++ b/ember-simple-charts/src/components/simple-chart-pie.js @@ -9,7 +9,7 @@ import { easeLinear } from 'd3-ease'; import { interpolate } from 'd3-interpolate'; import { TrackedAsyncData } from 'ember-async-data'; import { modifier } from 'ember-modifier'; -import sliceColor from '../helpers/slice-color.js'; +import sliceColor from '../utils/slice-color.js'; export default class SimpleChartPie extends Component { @tracked loadingPromise; @@ -101,7 +101,7 @@ export default class SimpleChartPie extends Component { const text = chart .selectAll('.slice') .append('text') - .style('color', (d) => sliceColor.compute([d.data.data, color])) + .style('color', (d) => sliceColor(d.data.data, color)) .style('font-size', '.8rem') .attr( 'transform', diff --git a/ember-simple-charts/src/helpers/slice-color.js b/ember-simple-charts/src/utils/slice-color.js similarity index 77% rename from ember-simple-charts/src/helpers/slice-color.js rename to ember-simple-charts/src/utils/slice-color.js index a00e8eb7..675157a7 100644 --- a/ember-simple-charts/src/helpers/slice-color.js +++ b/ember-simple-charts/src/utils/slice-color.js @@ -1,6 +1,4 @@ -import { helper } from '@ember/component/helper'; - -export default helper(function sliceColor([data, color]) { +export default function sliceColor(data, color) { const rgb = color(data); const parts = rgb.substr(4).split(')')[0].split(','); const r = parseInt(parts[0], 16); @@ -10,4 +8,4 @@ export default helper(function sliceColor([data, color]) { const yiq = (r * 299 + g * 587 + b * 114) / 1000; return yiq >= 256 ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)'; -}); +}