Skip to content

Commit

Permalink
Merge pull request #1239 from michaelchadwick/add-slice-color-helper
Browse files Browse the repository at this point in the history 
Add SliceColor utility method
  • Loading branch information
@michaelchadwick
michaelchadwick authored Jan 18, 2025
2 parents de5a472 + 5791312 commit 7e6fc3e
Show file tree
Hide file tree
Showing 6 changed files with 22 additions and 49 deletions.
2 changes: 1 addition & 1 deletion ember-simple-charts/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,4 +102,4 @@
"./components/simple-chart.js": "./dist/_app_/components/simple-chart.js"
}
}
}
}
14 changes: 2 additions & 12 deletions ember-simple-charts/src/components/simple-chart-bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 '../utils/slice-color.js';

export default class SimpleChartBar extends Component {
@tracked loading = true;
Expand Down Expand Up @@ -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(d.data, color))
.style('font-size', '.8rem')
.attr('text-anchor', 'middle')
.attr('x', (d) => `${xScale(d.label) + xScale.bandwidth() / 2}%`)
Expand Down
16 changes: 4 additions & 12 deletions ember-simple-charts/src/components/simple-chart-donut.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 '../utils/slice-color.js';

export default class SimpleChartDonut extends Component {
@tracked loadingPromise;
Expand Down Expand Up @@ -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))
Expand Down Expand Up @@ -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(d.data.data, color))
.style('font-size', '.8rem')
.attr(
'transform',
Expand Down
14 changes: 2 additions & 12 deletions ember-simple-charts/src/components/simple-chart-horz-bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 '../utils/slice-color.js';

export default class SimpleChartHorzBar extends Component {
@tracked loading = true;
Expand Down Expand Up @@ -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(d.data, color))
.style('font-size', '.8rem')
.attr('text-anchor', 'end')
.attr('text-align', 'right')
Expand Down
14 changes: 2 additions & 12 deletions ember-simple-charts/src/components/simple-chart-pie.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 '../utils/slice-color.js';

export default class SimpleChartPie extends Component {
@tracked loadingPromise;
Expand Down Expand Up @@ -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(d.data.data, color))
.style('font-size', '.8rem')
.attr(
'transform',
Expand Down
11 changes: 11 additions & 0 deletions ember-simple-charts/src/utils/slice-color.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export default 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)';
}

0 comments on commit 7e6fc3e

Please sign in to comment.