diff --git a/examples/demo.html b/examples/demo.html index 454c807..7ec1ac9 100755 --- a/examples/demo.html +++ b/examples/demo.html @@ -13,10 +13,10 @@ var pod = new ChartwerkBarPod( document.getElementById('chart'), [ - { target: 'test11', datapoints: getData(), matchedKey: 'm-1', color: 'red' }, - { target: 'test12', datapoints: [[100, 10], [200, 20], [300, 10]], matchedKey: 'm-1', color: 'green' }, - { target: 'test21', datapoints: [[130, 10], [230, 26], [330, 15]], matchedKey: 'm-2', color: 'yellow'}, - { target: 'test22', datapoints: [[130, 10], [230, 27], [330, 10]], matchedKey: 'm-2', color: 'blue' }, + { target: 'test11', datapoints: getData(), matchedKey: 'm-1', color: 'red', colorFormatter: (data) => ['green', 'yellow'][data.rowIndex] }, + // { target: 'test12', datapoints: [[100, 10], [200, 20], [300, 10]], matchedKey: 'm-1', color: 'green' }, + // { target: 'test21', datapoints: [[130, 10], [230, 26], [330, 15]], matchedKey: 'm-2', color: 'yellow'}, + // { target: 'test22', datapoints: [[130, 10], [230, 27], [330, 10]], matchedKey: 'm-2', color: 'blue' }, ], { usePanning: false, @@ -24,8 +24,8 @@ x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; } }, y: { format: 'custom', invert: false, range: [0, 30], valueFormatter: (value) => { return value + '%'; } } }, - stacked: true, - matching: true, + stacked: false, + matching: false, maxBarWidth: 20, minBarWidth: 4, zoomEvents: { @@ -37,7 +37,8 @@ ], eventsCallbacks: { zoomIn: (range) => { console.log('range', range) } - } + }, + renderLegend: false, } ); console.time('render'); @@ -46,7 +47,7 @@ function getData() { return [ - [100, 15], [110, 20], [300, 10], + [100, 15], [200, 20], [300, 10], ]; } diff --git a/src/index.ts b/src/index.ts index e3cf379..67cbe0a 100755 --- a/src/index.ts +++ b/src/index.ts @@ -59,12 +59,12 @@ export class ChartwerkBarPod extends ChartwerkPod { .data(data) .enter().append('g') .attr('class', 'rects-container') - .each((d: RowValues, i: number, nodes: any) => { - const container = d3.select(nodes[i]); + .each((d: RowValues, rowIndex: number, nodes: any) => { + const container = d3.select(nodes[rowIndex]); container.selectAll('rect') .data(d.values) .enter().append('rect') - .style('fill', (val, i) => d.colors[i]) + .style('fill', (val, idx) => this.getBarColor(d, val, idx, rowIndex)) .attr('opacity', () => this.getBarOpacity(d)) .attr('x', (val: number, idx: number) => { return this.getBarPositionX(d.key, idx); @@ -150,6 +150,13 @@ export class ChartwerkBarPod extends ChartwerkPod { return this.options.barOptions.opacityFormatter(rowValues); } + getBarColor(rowValues: RowValues, val: number, i: number, rowIndex: number): string { + if(_.isFunction(rowValues.colors[i])) { + return (rowValues.colors[i] as Function)({ rowData: rowValues, val, stackedIndex: i, rowIndex }); + } + return (rowValues.colors[i] as string); + } + mergeMacthedSeriesAndSort(matchedSeries: any[]) { // TODO: refactor if(matchedSeries.length === 0) { @@ -197,7 +204,7 @@ export class ChartwerkBarPod extends ChartwerkPod { const additionalValuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[2] !== undefined ? row[2] : null)); const zippedAdditionalValuesColumn = _.zip(...additionalValuesColumns); const zippedValuesColumn = _.zip(...valuesColumns); - const colors = _.map(series, serie => serie.color); + const colors = _.map(series, serie => serie.colorFormatter || serie.color); const tagrets = _.map(series, serie => serie.target); const zippedData = _.zip(keysColumn, zippedValuesColumn, zippedAdditionalValuesColumn, tagrets); const data = _.map(zippedData, row => { return { key: row[0], values: row[1], additionalValues: row[2], colors, serieTarget: tagrets } }); diff --git a/src/types.ts b/src/types.ts index b1b400a..f6903e6 100755 --- a/src/types.ts +++ b/src/types.ts @@ -29,6 +29,6 @@ export type RowValues = { key: number, values: number[], additionalValues: (null | number)[], // values in datapoints third column - colors: string[], + colors: (string | ((data: any) => string))[], serieTarget: string[], }