From b90e4f07268349373fe5519cde68c492c1a26a9f Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Wed, 26 Oct 2022 18:37:08 +0100 Subject: [PATCH 01/20] feat(partial): stacked column chart for the vue package --- packages/ez-vue/src/components/Bars.tsx | 18 +- .../ez-vue/src/components/StackedBars.tsx | 114 ++++++++++ .../recipes/column/ColumnChart.stories.tsx | 25 +++ .../src/recipes/column/StackedColumnChart.tsx | 212 ++++++++++++++++++ 4 files changed, 365 insertions(+), 4 deletions(-) create mode 100644 packages/ez-vue/src/components/StackedBars.tsx create mode 100644 packages/ez-vue/src/recipes/column/StackedColumnChart.tsx diff --git a/packages/ez-vue/src/components/Bars.tsx b/packages/ez-vue/src/components/Bars.tsx index f62ea04..1844536 100644 --- a/packages/ez-vue/src/components/Bars.tsx +++ b/packages/ez-vue/src/components/Bars.tsx @@ -42,12 +42,22 @@ export default class Bars extends Vue { } render() { - const { shapeData } = this; + const { + shapeData, chart, $scopedSlots, cartesianScale, colorScale, + } = this; + const { dimensions } = chart; + return ( - {shapeData.map((rectDatum) => ( - - ))} + {$scopedSlots.default + ? $scopedSlots.default({ + shapeData, + scales: { ...cartesianScale, colorScale }, + dimensions, + }) + : shapeData.map((rectDatum) => ( + + ))} ); } diff --git a/packages/ez-vue/src/components/StackedBars.tsx b/packages/ez-vue/src/components/StackedBars.tsx new file mode 100644 index 0000000..ce2458d --- /dev/null +++ b/packages/ez-vue/src/components/StackedBars.tsx @@ -0,0 +1,114 @@ +import Vue, { PropType } from 'vue'; +import Component from 'vue-class-component'; +import { + ChartContext, + Direction, + RectangleDatum, + ScaleLinearOrBand, +} from 'eazychart-core/src/types'; +import { InjectReactive, Prop } from 'vue-property-decorator'; +import { ScaleOrdinal, scaleRectangleData } from 'eazychart-core/src'; +import Bar from '@/components/shapes/Bar'; + +@Component({ components: { Bar } }) +export default class StackedBars extends Vue { + @InjectReactive('chart') + private chart!: ChartContext; + + @InjectReactive('cartesianScale') + private cartesianScale!: { + xScale: ScaleLinearOrBand; + yScale: ScaleLinearOrBand; + }; + + @Prop({ + type: String, + required: true, + }) + private readonly singleDomainKey!: string; + + @Prop({ + type: Array, + required: true, + }) + private readonly stackDomainKeys!: string[]; + + @Prop({ + type: String as PropType, + required: true, + }) + private readonly direction: Direction = Direction.VERTICAL; + + get colorScale() { + return this.chart.getScale('colorScale') as ScaleOrdinal; + } + + get scaledDataDict() { + return this.stackDomainKeys.reduce( + (acc: { [key: string]: RectangleDatum[] }, yDomainKey) => { + acc[yDomainKey] = scaleRectangleData( + this.chart.data, + this.singleDomainKey, + yDomainKey, + this.cartesianScale.xScale, + this.cartesianScale.yScale, + this.colorScale, + this.chart.dimensions, + this.chart.isRTL, + ); + return acc; + }, + {}, + ); + } + + render() { + const { + scaledDataDict, chart, stackDomainKeys, colorScale, direction, + } = this; + + return ( + + {chart.data.map((_datum, idx) => ( + // The Domain keys still needs to be sorted. + // We create a bar for every data row + // Each bar is a stack bar where every element is a domain key. + + {stackDomainKeys.map((yDomainKey, domainIdx) => { + const color = colorScale.scale(yDomainKey); + const scaledData = scaledDataDict[yDomainKey][idx]; + // The first domain key will not be affected. + const previousRectWidth = domainIdx !== 0 + ? scaledDataDict[stackDomainKeys[domainIdx - 1]][idx].width + : 0; + const previousRectHeight = domainIdx !== 0 + ? scaledDataDict[stackDomainKeys[domainIdx - 1]][idx].height + : 0; + // The height or the width of the current bar will be computed depending + // to the orientaion + // the height will be currentDKHeight - previousDKHeight (same for the width) + const shapeDatum = { + ...scaledData, + width: + direction === Direction.HORIZONTAL + ? scaledData.width - previousRectWidth + : scaledData.width, + height: + direction === Direction.VERTICAL + ? scaledData.height - previousRectHeight + : scaledData.height, + }; + + return ( + + ); + })} + + ))} + + ); + } +} diff --git a/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx b/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx index 2dd20c2..9514eb6 100644 --- a/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx +++ b/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx @@ -5,6 +5,7 @@ import { } from 'eazychart-dev/storybook/data'; import ColumnChart from './ColumnChart'; import LineColumnChart from './LineColumnChart'; +import StackedColumnChart from './StackedColumnChart'; const meta: Meta = { title: 'Vue/Column Chart', @@ -38,6 +39,17 @@ const LineColumnTemplate: Story = (_args, { argTypes }) => ({ `, }); +const StackedColumnTemplate: Story = (_args, { argTypes }) => ({ + title: 'StackedColumn', + components: { StackedColumnChart, ChartWrapper }, + props: Object.keys(argTypes), + template: ` + + + + `, +}); + // By passing using the Args format for exported stories, // you can control the props for a component for reuse in a test // https://storybook.js.org/docs/vue/workflows/unit-testing @@ -84,3 +96,16 @@ const lineColumnArguments = { }; LineColumn.args = lineColumnArguments; + +export const StackedColumn = StackedColumnTemplate.bind({}); + +const StackedColumnArguments = { + ...defaultArguments, + yAxis: { + domainKeys: ['value', 'value1', 'value2'], + title: 'Temperature', + tickFormat: (d: number) => `${d}°`, + }, +}; + +StackedColumn.args = StackedColumnArguments; diff --git a/packages/ez-vue/src/recipes/column/StackedColumnChart.tsx b/packages/ez-vue/src/recipes/column/StackedColumnChart.tsx new file mode 100644 index 0000000..c712a1a --- /dev/null +++ b/packages/ez-vue/src/recipes/column/StackedColumnChart.tsx @@ -0,0 +1,212 @@ +import { PropType } from 'vue'; +import Component, { mixins } from 'vue-class-component'; +import { + AnimationOptions, + ChartPadding, + Direction, + Position, + RawData, + GridConfig, + AxisConfig, + Dimensions, + AxisConfigMulti, +} from 'eazychart-core/src/types'; +import { Prop } from 'vue-property-decorator'; +import { ScaleBand, ScaleLinear } from 'eazychart-core/src'; +import Chart from '@/components/Chart'; +import Axis from '@/components/scales/Axis'; +import Legend from '@/components/addons/legend/Legend'; +import Tooltip from '@/components/addons/tooltip/Tooltip'; +import StackedBars from '@/components/StackedBars'; +import Grid from '@/components/scales/grid/Grid'; +import ColorScale from '@/components/scales/ColorScale'; +import CartesianScale from '@/components/scales/CartesianScale'; +import ToggleDomainKeyMixin from '@/lib/ToggleDomainKeyMixin'; + +@Component({ + components: { + Chart, + Grid, + StackedBars, + Axis, + Legend, + Tooltip, + }, +}) +export default class StackedColumnChart extends mixins(ToggleDomainKeyMixin) { + @Prop({ + type: Array as PropType, + required: true, + }) + private readonly data!: RawData; + + @Prop({ + type: Array, + default() { + return ['#339999', '#993399', '#333399']; + }, + }) + private readonly colors!: string[]; + + @Prop({ + type: Object as PropType, + default() { + return {}; + }, + }) + private readonly dimensions!: Partial; + + @Prop({ + type: Object as PropType, + default() { + return { + easing: 'easeBack', + duration: 400, + delay: 0, + }; + }, + }) + private readonly animationOptions!: AnimationOptions; + + @Prop({ + type: Object as PropType, + default() { + return { + left: 150, + bottom: 100, + right: 150, + top: 100, + }; + }, + }) + private readonly padding!: ChartPadding; + + @Prop({ + type: Object as PropType, + default() { + return { + directions: [Direction.HORIZONTAL, Direction.VERTICAL], + color: '#a8a8a8', + }; + }, + }) + private readonly grid!: GridConfig; + + @Prop({ + type: Object as PropType>, + default() { + return { + domainKey: 'name', + }; + }, + }) + private readonly xAxis!: AxisConfig; + + @Prop({ + type: Object as PropType>, + default() { + return { + domainKeys: ['value', 'value1', 'value2'], + }; + }, + }) + private readonly yAxis!: AxisConfigMulti; + + @Prop({ + type: Boolean, + default() { + return false; + }, + }) + private readonly isRTL!: boolean; + + getData(): RawData { + return this.data; + } + + getDomainKeys(): string[] { + return this.yAxis.domainKeys; + } + + render() { + const { + xAxis, + yAxis, + data, + colors, + padding, + animationOptions, + grid, + isRTL, + $scopedSlots, + dimensions, + activeDomain, + activeDomainKeys, + toggleDomainKey, + } = this; + + const scopedSlots = { + Legend: $scopedSlots.Legend + ? $scopedSlots.Legend + : () => , + Tooltip: $scopedSlots.Tooltip, + }; + return ( + + + + + + + + + + + ); + } +} From 9d7b0ac97035b19bfbb01d216cb11f2a0a730237 Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Thu, 27 Oct 2022 17:17:52 +0100 Subject: [PATCH 02/20] fix(partial): bug investigation --- packages/ez-vue/src/components/Chart.tsx | 1 + packages/ez-vue/src/components/addons/legend/Legend.tsx | 1 + packages/ez-vue/src/components/scales/ColorScale.tsx | 5 ++++- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/ez-vue/src/components/Chart.tsx b/packages/ez-vue/src/components/Chart.tsx index 9bf91f0..9db392f 100644 --- a/packages/ez-vue/src/components/Chart.tsx +++ b/packages/ez-vue/src/components/Chart.tsx @@ -191,6 +191,7 @@ export default class Chart extends Vue { // access the color domain for example. Otherwise, we would need to add a portal // which is still experimental in react + does not exist in Vue2. registerScale(scaleId: string, scale: AnyScale) { + // console.log('hanii lennaa', scale.scale.domain()); this.scales = { ...this.scales, [scaleId]: scale, diff --git a/packages/ez-vue/src/components/addons/legend/Legend.tsx b/packages/ez-vue/src/components/addons/legend/Legend.tsx index 0572cb7..555594c 100644 --- a/packages/ez-vue/src/components/addons/legend/Legend.tsx +++ b/packages/ez-vue/src/components/addons/legend/Legend.tsx @@ -44,6 +44,7 @@ export default class Legend extends Vue { } get colorScale() { + // console.log('sayabna 3aad', this.chart.getScale('colorScale')?.scale.domain()) return this.chart.getScale('colorScale'); } diff --git a/packages/ez-vue/src/components/scales/ColorScale.tsx b/packages/ez-vue/src/components/scales/ColorScale.tsx index d3f561a..157b510 100644 --- a/packages/ez-vue/src/components/scales/ColorScale.tsx +++ b/packages/ez-vue/src/components/scales/ColorScale.tsx @@ -24,13 +24,15 @@ export default class ColorScale extends Vue { }) private readonly definition!: ScaleOrdinalDefinition; - mounted() { + created() { this.colorScale = this.defineScale(); this.chart.registerScale('colorScale', this.colorScale); + // console.log('mounted', this.colorScale?.scale.domain()); } updated() { this.colorScale = this.defineScale(); + // console.log('hohaa', this.colorScale.scale.domain()); } @Watch('chart.dimensions') @@ -38,6 +40,7 @@ export default class ColorScale extends Vue { recomputeScale() { const { dimensions, data } = this.chart; this.colorScale.computeScale(dimensions, data); + // console.log('hehe', this.colorScale.scale.domain()); } defineScale() { From 145c7d02e3369f01b17025d666d683a77dfd91b6 Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Wed, 26 Oct 2022 18:37:08 +0100 Subject: [PATCH 03/20] feat(partial): stacked column chart for the vue package --- packages/ez-vue/src/components/Bars.tsx | 18 +- .../ez-vue/src/components/StackedBars.tsx | 114 ++++++++++ .../recipes/column/ColumnChart.stories.tsx | 25 +++ .../src/recipes/column/StackedColumnChart.tsx | 212 ++++++++++++++++++ 4 files changed, 365 insertions(+), 4 deletions(-) create mode 100644 packages/ez-vue/src/components/StackedBars.tsx create mode 100644 packages/ez-vue/src/recipes/column/StackedColumnChart.tsx diff --git a/packages/ez-vue/src/components/Bars.tsx b/packages/ez-vue/src/components/Bars.tsx index f62ea04..1844536 100644 --- a/packages/ez-vue/src/components/Bars.tsx +++ b/packages/ez-vue/src/components/Bars.tsx @@ -42,12 +42,22 @@ export default class Bars extends Vue { } render() { - const { shapeData } = this; + const { + shapeData, chart, $scopedSlots, cartesianScale, colorScale, + } = this; + const { dimensions } = chart; + return ( - {shapeData.map((rectDatum) => ( - - ))} + {$scopedSlots.default + ? $scopedSlots.default({ + shapeData, + scales: { ...cartesianScale, colorScale }, + dimensions, + }) + : shapeData.map((rectDatum) => ( + + ))} ); } diff --git a/packages/ez-vue/src/components/StackedBars.tsx b/packages/ez-vue/src/components/StackedBars.tsx new file mode 100644 index 0000000..ce2458d --- /dev/null +++ b/packages/ez-vue/src/components/StackedBars.tsx @@ -0,0 +1,114 @@ +import Vue, { PropType } from 'vue'; +import Component from 'vue-class-component'; +import { + ChartContext, + Direction, + RectangleDatum, + ScaleLinearOrBand, +} from 'eazychart-core/src/types'; +import { InjectReactive, Prop } from 'vue-property-decorator'; +import { ScaleOrdinal, scaleRectangleData } from 'eazychart-core/src'; +import Bar from '@/components/shapes/Bar'; + +@Component({ components: { Bar } }) +export default class StackedBars extends Vue { + @InjectReactive('chart') + private chart!: ChartContext; + + @InjectReactive('cartesianScale') + private cartesianScale!: { + xScale: ScaleLinearOrBand; + yScale: ScaleLinearOrBand; + }; + + @Prop({ + type: String, + required: true, + }) + private readonly singleDomainKey!: string; + + @Prop({ + type: Array, + required: true, + }) + private readonly stackDomainKeys!: string[]; + + @Prop({ + type: String as PropType, + required: true, + }) + private readonly direction: Direction = Direction.VERTICAL; + + get colorScale() { + return this.chart.getScale('colorScale') as ScaleOrdinal; + } + + get scaledDataDict() { + return this.stackDomainKeys.reduce( + (acc: { [key: string]: RectangleDatum[] }, yDomainKey) => { + acc[yDomainKey] = scaleRectangleData( + this.chart.data, + this.singleDomainKey, + yDomainKey, + this.cartesianScale.xScale, + this.cartesianScale.yScale, + this.colorScale, + this.chart.dimensions, + this.chart.isRTL, + ); + return acc; + }, + {}, + ); + } + + render() { + const { + scaledDataDict, chart, stackDomainKeys, colorScale, direction, + } = this; + + return ( + + {chart.data.map((_datum, idx) => ( + // The Domain keys still needs to be sorted. + // We create a bar for every data row + // Each bar is a stack bar where every element is a domain key. + + {stackDomainKeys.map((yDomainKey, domainIdx) => { + const color = colorScale.scale(yDomainKey); + const scaledData = scaledDataDict[yDomainKey][idx]; + // The first domain key will not be affected. + const previousRectWidth = domainIdx !== 0 + ? scaledDataDict[stackDomainKeys[domainIdx - 1]][idx].width + : 0; + const previousRectHeight = domainIdx !== 0 + ? scaledDataDict[stackDomainKeys[domainIdx - 1]][idx].height + : 0; + // The height or the width of the current bar will be computed depending + // to the orientaion + // the height will be currentDKHeight - previousDKHeight (same for the width) + const shapeDatum = { + ...scaledData, + width: + direction === Direction.HORIZONTAL + ? scaledData.width - previousRectWidth + : scaledData.width, + height: + direction === Direction.VERTICAL + ? scaledData.height - previousRectHeight + : scaledData.height, + }; + + return ( + + ); + })} + + ))} + + ); + } +} diff --git a/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx b/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx index 2dd20c2..9514eb6 100644 --- a/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx +++ b/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx @@ -5,6 +5,7 @@ import { } from 'eazychart-dev/storybook/data'; import ColumnChart from './ColumnChart'; import LineColumnChart from './LineColumnChart'; +import StackedColumnChart from './StackedColumnChart'; const meta: Meta = { title: 'Vue/Column Chart', @@ -38,6 +39,17 @@ const LineColumnTemplate: Story = (_args, { argTypes }) => ({ `, }); +const StackedColumnTemplate: Story = (_args, { argTypes }) => ({ + title: 'StackedColumn', + components: { StackedColumnChart, ChartWrapper }, + props: Object.keys(argTypes), + template: ` + + + + `, +}); + // By passing using the Args format for exported stories, // you can control the props for a component for reuse in a test // https://storybook.js.org/docs/vue/workflows/unit-testing @@ -84,3 +96,16 @@ const lineColumnArguments = { }; LineColumn.args = lineColumnArguments; + +export const StackedColumn = StackedColumnTemplate.bind({}); + +const StackedColumnArguments = { + ...defaultArguments, + yAxis: { + domainKeys: ['value', 'value1', 'value2'], + title: 'Temperature', + tickFormat: (d: number) => `${d}°`, + }, +}; + +StackedColumn.args = StackedColumnArguments; diff --git a/packages/ez-vue/src/recipes/column/StackedColumnChart.tsx b/packages/ez-vue/src/recipes/column/StackedColumnChart.tsx new file mode 100644 index 0000000..c712a1a --- /dev/null +++ b/packages/ez-vue/src/recipes/column/StackedColumnChart.tsx @@ -0,0 +1,212 @@ +import { PropType } from 'vue'; +import Component, { mixins } from 'vue-class-component'; +import { + AnimationOptions, + ChartPadding, + Direction, + Position, + RawData, + GridConfig, + AxisConfig, + Dimensions, + AxisConfigMulti, +} from 'eazychart-core/src/types'; +import { Prop } from 'vue-property-decorator'; +import { ScaleBand, ScaleLinear } from 'eazychart-core/src'; +import Chart from '@/components/Chart'; +import Axis from '@/components/scales/Axis'; +import Legend from '@/components/addons/legend/Legend'; +import Tooltip from '@/components/addons/tooltip/Tooltip'; +import StackedBars from '@/components/StackedBars'; +import Grid from '@/components/scales/grid/Grid'; +import ColorScale from '@/components/scales/ColorScale'; +import CartesianScale from '@/components/scales/CartesianScale'; +import ToggleDomainKeyMixin from '@/lib/ToggleDomainKeyMixin'; + +@Component({ + components: { + Chart, + Grid, + StackedBars, + Axis, + Legend, + Tooltip, + }, +}) +export default class StackedColumnChart extends mixins(ToggleDomainKeyMixin) { + @Prop({ + type: Array as PropType, + required: true, + }) + private readonly data!: RawData; + + @Prop({ + type: Array, + default() { + return ['#339999', '#993399', '#333399']; + }, + }) + private readonly colors!: string[]; + + @Prop({ + type: Object as PropType, + default() { + return {}; + }, + }) + private readonly dimensions!: Partial; + + @Prop({ + type: Object as PropType, + default() { + return { + easing: 'easeBack', + duration: 400, + delay: 0, + }; + }, + }) + private readonly animationOptions!: AnimationOptions; + + @Prop({ + type: Object as PropType, + default() { + return { + left: 150, + bottom: 100, + right: 150, + top: 100, + }; + }, + }) + private readonly padding!: ChartPadding; + + @Prop({ + type: Object as PropType, + default() { + return { + directions: [Direction.HORIZONTAL, Direction.VERTICAL], + color: '#a8a8a8', + }; + }, + }) + private readonly grid!: GridConfig; + + @Prop({ + type: Object as PropType>, + default() { + return { + domainKey: 'name', + }; + }, + }) + private readonly xAxis!: AxisConfig; + + @Prop({ + type: Object as PropType>, + default() { + return { + domainKeys: ['value', 'value1', 'value2'], + }; + }, + }) + private readonly yAxis!: AxisConfigMulti; + + @Prop({ + type: Boolean, + default() { + return false; + }, + }) + private readonly isRTL!: boolean; + + getData(): RawData { + return this.data; + } + + getDomainKeys(): string[] { + return this.yAxis.domainKeys; + } + + render() { + const { + xAxis, + yAxis, + data, + colors, + padding, + animationOptions, + grid, + isRTL, + $scopedSlots, + dimensions, + activeDomain, + activeDomainKeys, + toggleDomainKey, + } = this; + + const scopedSlots = { + Legend: $scopedSlots.Legend + ? $scopedSlots.Legend + : () => , + Tooltip: $scopedSlots.Tooltip, + }; + return ( + + + + + + + + + + + ); + } +} From 461ae2a484a9a184ed5935283b1492e4431a3e05 Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Thu, 27 Oct 2022 17:17:52 +0100 Subject: [PATCH 04/20] fix(partial): bug investigation --- packages/ez-vue/src/components/Chart.tsx | 1 + packages/ez-vue/src/components/addons/legend/Legend.tsx | 1 + packages/ez-vue/src/components/scales/ColorScale.tsx | 5 ++++- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/ez-vue/src/components/Chart.tsx b/packages/ez-vue/src/components/Chart.tsx index 9bf91f0..9db392f 100644 --- a/packages/ez-vue/src/components/Chart.tsx +++ b/packages/ez-vue/src/components/Chart.tsx @@ -191,6 +191,7 @@ export default class Chart extends Vue { // access the color domain for example. Otherwise, we would need to add a portal // which is still experimental in react + does not exist in Vue2. registerScale(scaleId: string, scale: AnyScale) { + // console.log('hanii lennaa', scale.scale.domain()); this.scales = { ...this.scales, [scaleId]: scale, diff --git a/packages/ez-vue/src/components/addons/legend/Legend.tsx b/packages/ez-vue/src/components/addons/legend/Legend.tsx index 0572cb7..555594c 100644 --- a/packages/ez-vue/src/components/addons/legend/Legend.tsx +++ b/packages/ez-vue/src/components/addons/legend/Legend.tsx @@ -44,6 +44,7 @@ export default class Legend extends Vue { } get colorScale() { + // console.log('sayabna 3aad', this.chart.getScale('colorScale')?.scale.domain()) return this.chart.getScale('colorScale'); } diff --git a/packages/ez-vue/src/components/scales/ColorScale.tsx b/packages/ez-vue/src/components/scales/ColorScale.tsx index d3f561a..157b510 100644 --- a/packages/ez-vue/src/components/scales/ColorScale.tsx +++ b/packages/ez-vue/src/components/scales/ColorScale.tsx @@ -24,13 +24,15 @@ export default class ColorScale extends Vue { }) private readonly definition!: ScaleOrdinalDefinition; - mounted() { + created() { this.colorScale = this.defineScale(); this.chart.registerScale('colorScale', this.colorScale); + // console.log('mounted', this.colorScale?.scale.domain()); } updated() { this.colorScale = this.defineScale(); + // console.log('hohaa', this.colorScale.scale.domain()); } @Watch('chart.dimensions') @@ -38,6 +40,7 @@ export default class ColorScale extends Vue { recomputeScale() { const { dimensions, data } = this.chart; this.colorScale.computeScale(dimensions, data); + // console.log('hehe', this.colorScale.scale.domain()); } defineScale() { From a00142ba60a08101089ed8a6b257ab7e8c0ea38e Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Fri, 28 Oct 2022 17:37:18 +0100 Subject: [PATCH 05/20] feat(partial): stacked column chart (vue) --- packages/ez-vue/src/components/Chart.tsx | 1 - packages/ez-vue/src/components/addons/legend/Legend.tsx | 1 - packages/ez-vue/src/components/scales/ColorScale.tsx | 3 --- 3 files changed, 5 deletions(-) diff --git a/packages/ez-vue/src/components/Chart.tsx b/packages/ez-vue/src/components/Chart.tsx index 9db392f..9bf91f0 100644 --- a/packages/ez-vue/src/components/Chart.tsx +++ b/packages/ez-vue/src/components/Chart.tsx @@ -191,7 +191,6 @@ export default class Chart extends Vue { // access the color domain for example. Otherwise, we would need to add a portal // which is still experimental in react + does not exist in Vue2. registerScale(scaleId: string, scale: AnyScale) { - // console.log('hanii lennaa', scale.scale.domain()); this.scales = { ...this.scales, [scaleId]: scale, diff --git a/packages/ez-vue/src/components/addons/legend/Legend.tsx b/packages/ez-vue/src/components/addons/legend/Legend.tsx index 555594c..0572cb7 100644 --- a/packages/ez-vue/src/components/addons/legend/Legend.tsx +++ b/packages/ez-vue/src/components/addons/legend/Legend.tsx @@ -44,7 +44,6 @@ export default class Legend extends Vue { } get colorScale() { - // console.log('sayabna 3aad', this.chart.getScale('colorScale')?.scale.domain()) return this.chart.getScale('colorScale'); } diff --git a/packages/ez-vue/src/components/scales/ColorScale.tsx b/packages/ez-vue/src/components/scales/ColorScale.tsx index 157b510..24c8cbe 100644 --- a/packages/ez-vue/src/components/scales/ColorScale.tsx +++ b/packages/ez-vue/src/components/scales/ColorScale.tsx @@ -27,12 +27,10 @@ export default class ColorScale extends Vue { created() { this.colorScale = this.defineScale(); this.chart.registerScale('colorScale', this.colorScale); - // console.log('mounted', this.colorScale?.scale.domain()); } updated() { this.colorScale = this.defineScale(); - // console.log('hohaa', this.colorScale.scale.domain()); } @Watch('chart.dimensions') @@ -40,7 +38,6 @@ export default class ColorScale extends Vue { recomputeScale() { const { dimensions, data } = this.chart; this.colorScale.computeScale(dimensions, data); - // console.log('hehe', this.colorScale.scale.domain()); } defineScale() { From 740daabff8c2db51bea6db81fc27db38811cd166 Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Fri, 28 Oct 2022 17:39:06 +0100 Subject: [PATCH 06/20] feat(partial): stacked column chart (vue) --- packages/ez-vue/src/components/Chart.tsx | 1 - packages/ez-vue/src/components/addons/legend/Legend.tsx | 1 - packages/ez-vue/src/components/scales/ColorScale.tsx | 3 --- 3 files changed, 5 deletions(-) diff --git a/packages/ez-vue/src/components/Chart.tsx b/packages/ez-vue/src/components/Chart.tsx index 9db392f..9bf91f0 100644 --- a/packages/ez-vue/src/components/Chart.tsx +++ b/packages/ez-vue/src/components/Chart.tsx @@ -191,7 +191,6 @@ export default class Chart extends Vue { // access the color domain for example. Otherwise, we would need to add a portal // which is still experimental in react + does not exist in Vue2. registerScale(scaleId: string, scale: AnyScale) { - // console.log('hanii lennaa', scale.scale.domain()); this.scales = { ...this.scales, [scaleId]: scale, diff --git a/packages/ez-vue/src/components/addons/legend/Legend.tsx b/packages/ez-vue/src/components/addons/legend/Legend.tsx index 555594c..0572cb7 100644 --- a/packages/ez-vue/src/components/addons/legend/Legend.tsx +++ b/packages/ez-vue/src/components/addons/legend/Legend.tsx @@ -44,7 +44,6 @@ export default class Legend extends Vue { } get colorScale() { - // console.log('sayabna 3aad', this.chart.getScale('colorScale')?.scale.domain()) return this.chart.getScale('colorScale'); } diff --git a/packages/ez-vue/src/components/scales/ColorScale.tsx b/packages/ez-vue/src/components/scales/ColorScale.tsx index 157b510..24c8cbe 100644 --- a/packages/ez-vue/src/components/scales/ColorScale.tsx +++ b/packages/ez-vue/src/components/scales/ColorScale.tsx @@ -27,12 +27,10 @@ export default class ColorScale extends Vue { created() { this.colorScale = this.defineScale(); this.chart.registerScale('colorScale', this.colorScale); - // console.log('mounted', this.colorScale?.scale.domain()); } updated() { this.colorScale = this.defineScale(); - // console.log('hohaa', this.colorScale.scale.domain()); } @Watch('chart.dimensions') @@ -40,7 +38,6 @@ export default class ColorScale extends Vue { recomputeScale() { const { dimensions, data } = this.chart; this.colorScale.computeScale(dimensions, data); - // console.log('hehe', this.colorScale.scale.domain()); } defineScale() { From 167fe6f5a2710e7f5f7f11f6fab7b41355775ccf Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Wed, 26 Oct 2022 18:37:08 +0100 Subject: [PATCH 07/20] feat(partial): stacked column chart for the vue package --- packages/ez-vue/src/components/Bars.tsx | 18 +- .../ez-vue/src/components/StackedBars.tsx | 114 ++++++++++ .../recipes/column/ColumnChart.stories.tsx | 25 +++ .../src/recipes/column/StackedColumnChart.tsx | 212 ++++++++++++++++++ 4 files changed, 365 insertions(+), 4 deletions(-) create mode 100644 packages/ez-vue/src/components/StackedBars.tsx create mode 100644 packages/ez-vue/src/recipes/column/StackedColumnChart.tsx diff --git a/packages/ez-vue/src/components/Bars.tsx b/packages/ez-vue/src/components/Bars.tsx index f62ea04..1844536 100644 --- a/packages/ez-vue/src/components/Bars.tsx +++ b/packages/ez-vue/src/components/Bars.tsx @@ -42,12 +42,22 @@ export default class Bars extends Vue { } render() { - const { shapeData } = this; + const { + shapeData, chart, $scopedSlots, cartesianScale, colorScale, + } = this; + const { dimensions } = chart; + return ( - {shapeData.map((rectDatum) => ( - - ))} + {$scopedSlots.default + ? $scopedSlots.default({ + shapeData, + scales: { ...cartesianScale, colorScale }, + dimensions, + }) + : shapeData.map((rectDatum) => ( + + ))} ); } diff --git a/packages/ez-vue/src/components/StackedBars.tsx b/packages/ez-vue/src/components/StackedBars.tsx new file mode 100644 index 0000000..ce2458d --- /dev/null +++ b/packages/ez-vue/src/components/StackedBars.tsx @@ -0,0 +1,114 @@ +import Vue, { PropType } from 'vue'; +import Component from 'vue-class-component'; +import { + ChartContext, + Direction, + RectangleDatum, + ScaleLinearOrBand, +} from 'eazychart-core/src/types'; +import { InjectReactive, Prop } from 'vue-property-decorator'; +import { ScaleOrdinal, scaleRectangleData } from 'eazychart-core/src'; +import Bar from '@/components/shapes/Bar'; + +@Component({ components: { Bar } }) +export default class StackedBars extends Vue { + @InjectReactive('chart') + private chart!: ChartContext; + + @InjectReactive('cartesianScale') + private cartesianScale!: { + xScale: ScaleLinearOrBand; + yScale: ScaleLinearOrBand; + }; + + @Prop({ + type: String, + required: true, + }) + private readonly singleDomainKey!: string; + + @Prop({ + type: Array, + required: true, + }) + private readonly stackDomainKeys!: string[]; + + @Prop({ + type: String as PropType, + required: true, + }) + private readonly direction: Direction = Direction.VERTICAL; + + get colorScale() { + return this.chart.getScale('colorScale') as ScaleOrdinal; + } + + get scaledDataDict() { + return this.stackDomainKeys.reduce( + (acc: { [key: string]: RectangleDatum[] }, yDomainKey) => { + acc[yDomainKey] = scaleRectangleData( + this.chart.data, + this.singleDomainKey, + yDomainKey, + this.cartesianScale.xScale, + this.cartesianScale.yScale, + this.colorScale, + this.chart.dimensions, + this.chart.isRTL, + ); + return acc; + }, + {}, + ); + } + + render() { + const { + scaledDataDict, chart, stackDomainKeys, colorScale, direction, + } = this; + + return ( + + {chart.data.map((_datum, idx) => ( + // The Domain keys still needs to be sorted. + // We create a bar for every data row + // Each bar is a stack bar where every element is a domain key. + + {stackDomainKeys.map((yDomainKey, domainIdx) => { + const color = colorScale.scale(yDomainKey); + const scaledData = scaledDataDict[yDomainKey][idx]; + // The first domain key will not be affected. + const previousRectWidth = domainIdx !== 0 + ? scaledDataDict[stackDomainKeys[domainIdx - 1]][idx].width + : 0; + const previousRectHeight = domainIdx !== 0 + ? scaledDataDict[stackDomainKeys[domainIdx - 1]][idx].height + : 0; + // The height or the width of the current bar will be computed depending + // to the orientaion + // the height will be currentDKHeight - previousDKHeight (same for the width) + const shapeDatum = { + ...scaledData, + width: + direction === Direction.HORIZONTAL + ? scaledData.width - previousRectWidth + : scaledData.width, + height: + direction === Direction.VERTICAL + ? scaledData.height - previousRectHeight + : scaledData.height, + }; + + return ( + + ); + })} + + ))} + + ); + } +} diff --git a/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx b/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx index 2dd20c2..9514eb6 100644 --- a/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx +++ b/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx @@ -5,6 +5,7 @@ import { } from 'eazychart-dev/storybook/data'; import ColumnChart from './ColumnChart'; import LineColumnChart from './LineColumnChart'; +import StackedColumnChart from './StackedColumnChart'; const meta: Meta = { title: 'Vue/Column Chart', @@ -38,6 +39,17 @@ const LineColumnTemplate: Story = (_args, { argTypes }) => ({ `, }); +const StackedColumnTemplate: Story = (_args, { argTypes }) => ({ + title: 'StackedColumn', + components: { StackedColumnChart, ChartWrapper }, + props: Object.keys(argTypes), + template: ` + + + + `, +}); + // By passing using the Args format for exported stories, // you can control the props for a component for reuse in a test // https://storybook.js.org/docs/vue/workflows/unit-testing @@ -84,3 +96,16 @@ const lineColumnArguments = { }; LineColumn.args = lineColumnArguments; + +export const StackedColumn = StackedColumnTemplate.bind({}); + +const StackedColumnArguments = { + ...defaultArguments, + yAxis: { + domainKeys: ['value', 'value1', 'value2'], + title: 'Temperature', + tickFormat: (d: number) => `${d}°`, + }, +}; + +StackedColumn.args = StackedColumnArguments; diff --git a/packages/ez-vue/src/recipes/column/StackedColumnChart.tsx b/packages/ez-vue/src/recipes/column/StackedColumnChart.tsx new file mode 100644 index 0000000..c712a1a --- /dev/null +++ b/packages/ez-vue/src/recipes/column/StackedColumnChart.tsx @@ -0,0 +1,212 @@ +import { PropType } from 'vue'; +import Component, { mixins } from 'vue-class-component'; +import { + AnimationOptions, + ChartPadding, + Direction, + Position, + RawData, + GridConfig, + AxisConfig, + Dimensions, + AxisConfigMulti, +} from 'eazychart-core/src/types'; +import { Prop } from 'vue-property-decorator'; +import { ScaleBand, ScaleLinear } from 'eazychart-core/src'; +import Chart from '@/components/Chart'; +import Axis from '@/components/scales/Axis'; +import Legend from '@/components/addons/legend/Legend'; +import Tooltip from '@/components/addons/tooltip/Tooltip'; +import StackedBars from '@/components/StackedBars'; +import Grid from '@/components/scales/grid/Grid'; +import ColorScale from '@/components/scales/ColorScale'; +import CartesianScale from '@/components/scales/CartesianScale'; +import ToggleDomainKeyMixin from '@/lib/ToggleDomainKeyMixin'; + +@Component({ + components: { + Chart, + Grid, + StackedBars, + Axis, + Legend, + Tooltip, + }, +}) +export default class StackedColumnChart extends mixins(ToggleDomainKeyMixin) { + @Prop({ + type: Array as PropType, + required: true, + }) + private readonly data!: RawData; + + @Prop({ + type: Array, + default() { + return ['#339999', '#993399', '#333399']; + }, + }) + private readonly colors!: string[]; + + @Prop({ + type: Object as PropType, + default() { + return {}; + }, + }) + private readonly dimensions!: Partial; + + @Prop({ + type: Object as PropType, + default() { + return { + easing: 'easeBack', + duration: 400, + delay: 0, + }; + }, + }) + private readonly animationOptions!: AnimationOptions; + + @Prop({ + type: Object as PropType, + default() { + return { + left: 150, + bottom: 100, + right: 150, + top: 100, + }; + }, + }) + private readonly padding!: ChartPadding; + + @Prop({ + type: Object as PropType, + default() { + return { + directions: [Direction.HORIZONTAL, Direction.VERTICAL], + color: '#a8a8a8', + }; + }, + }) + private readonly grid!: GridConfig; + + @Prop({ + type: Object as PropType>, + default() { + return { + domainKey: 'name', + }; + }, + }) + private readonly xAxis!: AxisConfig; + + @Prop({ + type: Object as PropType>, + default() { + return { + domainKeys: ['value', 'value1', 'value2'], + }; + }, + }) + private readonly yAxis!: AxisConfigMulti; + + @Prop({ + type: Boolean, + default() { + return false; + }, + }) + private readonly isRTL!: boolean; + + getData(): RawData { + return this.data; + } + + getDomainKeys(): string[] { + return this.yAxis.domainKeys; + } + + render() { + const { + xAxis, + yAxis, + data, + colors, + padding, + animationOptions, + grid, + isRTL, + $scopedSlots, + dimensions, + activeDomain, + activeDomainKeys, + toggleDomainKey, + } = this; + + const scopedSlots = { + Legend: $scopedSlots.Legend + ? $scopedSlots.Legend + : () => , + Tooltip: $scopedSlots.Tooltip, + }; + return ( + + + + + + + + + + + ); + } +} From d747867448dc477af70b831d3b814a9fd9b7fcf0 Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Thu, 27 Oct 2022 17:17:52 +0100 Subject: [PATCH 08/20] fix(partial): bug investigation --- packages/ez-vue/src/components/Chart.tsx | 1 + packages/ez-vue/src/components/addons/legend/Legend.tsx | 1 + packages/ez-vue/src/components/scales/ColorScale.tsx | 5 ++++- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/ez-vue/src/components/Chart.tsx b/packages/ez-vue/src/components/Chart.tsx index 9bf91f0..9db392f 100644 --- a/packages/ez-vue/src/components/Chart.tsx +++ b/packages/ez-vue/src/components/Chart.tsx @@ -191,6 +191,7 @@ export default class Chart extends Vue { // access the color domain for example. Otherwise, we would need to add a portal // which is still experimental in react + does not exist in Vue2. registerScale(scaleId: string, scale: AnyScale) { + // console.log('hanii lennaa', scale.scale.domain()); this.scales = { ...this.scales, [scaleId]: scale, diff --git a/packages/ez-vue/src/components/addons/legend/Legend.tsx b/packages/ez-vue/src/components/addons/legend/Legend.tsx index 0572cb7..555594c 100644 --- a/packages/ez-vue/src/components/addons/legend/Legend.tsx +++ b/packages/ez-vue/src/components/addons/legend/Legend.tsx @@ -44,6 +44,7 @@ export default class Legend extends Vue { } get colorScale() { + // console.log('sayabna 3aad', this.chart.getScale('colorScale')?.scale.domain()) return this.chart.getScale('colorScale'); } diff --git a/packages/ez-vue/src/components/scales/ColorScale.tsx b/packages/ez-vue/src/components/scales/ColorScale.tsx index d3f561a..157b510 100644 --- a/packages/ez-vue/src/components/scales/ColorScale.tsx +++ b/packages/ez-vue/src/components/scales/ColorScale.tsx @@ -24,13 +24,15 @@ export default class ColorScale extends Vue { }) private readonly definition!: ScaleOrdinalDefinition; - mounted() { + created() { this.colorScale = this.defineScale(); this.chart.registerScale('colorScale', this.colorScale); + // console.log('mounted', this.colorScale?.scale.domain()); } updated() { this.colorScale = this.defineScale(); + // console.log('hohaa', this.colorScale.scale.domain()); } @Watch('chart.dimensions') @@ -38,6 +40,7 @@ export default class ColorScale extends Vue { recomputeScale() { const { dimensions, data } = this.chart; this.colorScale.computeScale(dimensions, data); + // console.log('hehe', this.colorScale.scale.domain()); } defineScale() { From fee3a257f844938997c1837b115bc68c316b275e Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Fri, 28 Oct 2022 17:37:18 +0100 Subject: [PATCH 09/20] feat(partial): stacked column chart (vue) --- packages/ez-vue/src/components/Chart.tsx | 1 - packages/ez-vue/src/components/addons/legend/Legend.tsx | 1 - packages/ez-vue/src/components/scales/ColorScale.tsx | 3 --- 3 files changed, 5 deletions(-) diff --git a/packages/ez-vue/src/components/Chart.tsx b/packages/ez-vue/src/components/Chart.tsx index 9db392f..9bf91f0 100644 --- a/packages/ez-vue/src/components/Chart.tsx +++ b/packages/ez-vue/src/components/Chart.tsx @@ -191,7 +191,6 @@ export default class Chart extends Vue { // access the color domain for example. Otherwise, we would need to add a portal // which is still experimental in react + does not exist in Vue2. registerScale(scaleId: string, scale: AnyScale) { - // console.log('hanii lennaa', scale.scale.domain()); this.scales = { ...this.scales, [scaleId]: scale, diff --git a/packages/ez-vue/src/components/addons/legend/Legend.tsx b/packages/ez-vue/src/components/addons/legend/Legend.tsx index 555594c..0572cb7 100644 --- a/packages/ez-vue/src/components/addons/legend/Legend.tsx +++ b/packages/ez-vue/src/components/addons/legend/Legend.tsx @@ -44,7 +44,6 @@ export default class Legend extends Vue { } get colorScale() { - // console.log('sayabna 3aad', this.chart.getScale('colorScale')?.scale.domain()) return this.chart.getScale('colorScale'); } diff --git a/packages/ez-vue/src/components/scales/ColorScale.tsx b/packages/ez-vue/src/components/scales/ColorScale.tsx index 157b510..24c8cbe 100644 --- a/packages/ez-vue/src/components/scales/ColorScale.tsx +++ b/packages/ez-vue/src/components/scales/ColorScale.tsx @@ -27,12 +27,10 @@ export default class ColorScale extends Vue { created() { this.colorScale = this.defineScale(); this.chart.registerScale('colorScale', this.colorScale); - // console.log('mounted', this.colorScale?.scale.domain()); } updated() { this.colorScale = this.defineScale(); - // console.log('hohaa', this.colorScale.scale.domain()); } @Watch('chart.dimensions') @@ -40,7 +38,6 @@ export default class ColorScale extends Vue { recomputeScale() { const { dimensions, data } = this.chart; this.colorScale.computeScale(dimensions, data); - // console.log('hehe', this.colorScale.scale.domain()); } defineScale() { From 9750fff8e119761b6fc05e115148c689bb9d1a97 Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Thu, 27 Oct 2022 17:17:52 +0100 Subject: [PATCH 10/20] fix(partial): bug investigation --- packages/ez-vue/src/components/Chart.tsx | 1 + packages/ez-vue/src/components/addons/legend/Legend.tsx | 1 + packages/ez-vue/src/components/scales/ColorScale.tsx | 3 +++ 3 files changed, 5 insertions(+) diff --git a/packages/ez-vue/src/components/Chart.tsx b/packages/ez-vue/src/components/Chart.tsx index 9bf91f0..9db392f 100644 --- a/packages/ez-vue/src/components/Chart.tsx +++ b/packages/ez-vue/src/components/Chart.tsx @@ -191,6 +191,7 @@ export default class Chart extends Vue { // access the color domain for example. Otherwise, we would need to add a portal // which is still experimental in react + does not exist in Vue2. registerScale(scaleId: string, scale: AnyScale) { + // console.log('hanii lennaa', scale.scale.domain()); this.scales = { ...this.scales, [scaleId]: scale, diff --git a/packages/ez-vue/src/components/addons/legend/Legend.tsx b/packages/ez-vue/src/components/addons/legend/Legend.tsx index 0572cb7..555594c 100644 --- a/packages/ez-vue/src/components/addons/legend/Legend.tsx +++ b/packages/ez-vue/src/components/addons/legend/Legend.tsx @@ -44,6 +44,7 @@ export default class Legend extends Vue { } get colorScale() { + // console.log('sayabna 3aad', this.chart.getScale('colorScale')?.scale.domain()) return this.chart.getScale('colorScale'); } diff --git a/packages/ez-vue/src/components/scales/ColorScale.tsx b/packages/ez-vue/src/components/scales/ColorScale.tsx index 24c8cbe..157b510 100644 --- a/packages/ez-vue/src/components/scales/ColorScale.tsx +++ b/packages/ez-vue/src/components/scales/ColorScale.tsx @@ -27,10 +27,12 @@ export default class ColorScale extends Vue { created() { this.colorScale = this.defineScale(); this.chart.registerScale('colorScale', this.colorScale); + // console.log('mounted', this.colorScale?.scale.domain()); } updated() { this.colorScale = this.defineScale(); + // console.log('hohaa', this.colorScale.scale.domain()); } @Watch('chart.dimensions') @@ -38,6 +40,7 @@ export default class ColorScale extends Vue { recomputeScale() { const { dimensions, data } = this.chart; this.colorScale.computeScale(dimensions, data); + // console.log('hehe', this.colorScale.scale.domain()); } defineScale() { From 06b431039f1cf16fa595fa91ae04dbdff4e39329 Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Fri, 28 Oct 2022 17:39:06 +0100 Subject: [PATCH 11/20] feat(partial): stacked column chart (vue) --- packages/ez-vue/src/components/Chart.tsx | 1 - packages/ez-vue/src/components/addons/legend/Legend.tsx | 1 - packages/ez-vue/src/components/scales/ColorScale.tsx | 3 --- 3 files changed, 5 deletions(-) diff --git a/packages/ez-vue/src/components/Chart.tsx b/packages/ez-vue/src/components/Chart.tsx index 9db392f..9bf91f0 100644 --- a/packages/ez-vue/src/components/Chart.tsx +++ b/packages/ez-vue/src/components/Chart.tsx @@ -191,7 +191,6 @@ export default class Chart extends Vue { // access the color domain for example. Otherwise, we would need to add a portal // which is still experimental in react + does not exist in Vue2. registerScale(scaleId: string, scale: AnyScale) { - // console.log('hanii lennaa', scale.scale.domain()); this.scales = { ...this.scales, [scaleId]: scale, diff --git a/packages/ez-vue/src/components/addons/legend/Legend.tsx b/packages/ez-vue/src/components/addons/legend/Legend.tsx index 555594c..0572cb7 100644 --- a/packages/ez-vue/src/components/addons/legend/Legend.tsx +++ b/packages/ez-vue/src/components/addons/legend/Legend.tsx @@ -44,7 +44,6 @@ export default class Legend extends Vue { } get colorScale() { - // console.log('sayabna 3aad', this.chart.getScale('colorScale')?.scale.domain()) return this.chart.getScale('colorScale'); } diff --git a/packages/ez-vue/src/components/scales/ColorScale.tsx b/packages/ez-vue/src/components/scales/ColorScale.tsx index 157b510..24c8cbe 100644 --- a/packages/ez-vue/src/components/scales/ColorScale.tsx +++ b/packages/ez-vue/src/components/scales/ColorScale.tsx @@ -27,12 +27,10 @@ export default class ColorScale extends Vue { created() { this.colorScale = this.defineScale(); this.chart.registerScale('colorScale', this.colorScale); - // console.log('mounted', this.colorScale?.scale.domain()); } updated() { this.colorScale = this.defineScale(); - // console.log('hohaa', this.colorScale.scale.domain()); } @Watch('chart.dimensions') @@ -40,7 +38,6 @@ export default class ColorScale extends Vue { recomputeScale() { const { dimensions, data } = this.chart; this.colorScale.computeScale(dimensions, data); - // console.log('hehe', this.colorScale.scale.domain()); } defineScale() { From f7029bc9ad625c9595b46a3f10ed409566fc8a00 Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Wed, 26 Oct 2022 18:37:08 +0100 Subject: [PATCH 12/20] feat(partial): stacked column chart for the vue package --- packages/ez-vue/src/components/Bars.tsx | 18 +- .../ez-vue/src/components/StackedBars.tsx | 114 ++++++++++ .../recipes/column/ColumnChart.stories.tsx | 25 +++ .../src/recipes/column/StackedColumnChart.tsx | 212 ++++++++++++++++++ 4 files changed, 365 insertions(+), 4 deletions(-) create mode 100644 packages/ez-vue/src/components/StackedBars.tsx create mode 100644 packages/ez-vue/src/recipes/column/StackedColumnChart.tsx diff --git a/packages/ez-vue/src/components/Bars.tsx b/packages/ez-vue/src/components/Bars.tsx index f62ea04..1844536 100644 --- a/packages/ez-vue/src/components/Bars.tsx +++ b/packages/ez-vue/src/components/Bars.tsx @@ -42,12 +42,22 @@ export default class Bars extends Vue { } render() { - const { shapeData } = this; + const { + shapeData, chart, $scopedSlots, cartesianScale, colorScale, + } = this; + const { dimensions } = chart; + return ( - {shapeData.map((rectDatum) => ( - - ))} + {$scopedSlots.default + ? $scopedSlots.default({ + shapeData, + scales: { ...cartesianScale, colorScale }, + dimensions, + }) + : shapeData.map((rectDatum) => ( + + ))} ); } diff --git a/packages/ez-vue/src/components/StackedBars.tsx b/packages/ez-vue/src/components/StackedBars.tsx new file mode 100644 index 0000000..ce2458d --- /dev/null +++ b/packages/ez-vue/src/components/StackedBars.tsx @@ -0,0 +1,114 @@ +import Vue, { PropType } from 'vue'; +import Component from 'vue-class-component'; +import { + ChartContext, + Direction, + RectangleDatum, + ScaleLinearOrBand, +} from 'eazychart-core/src/types'; +import { InjectReactive, Prop } from 'vue-property-decorator'; +import { ScaleOrdinal, scaleRectangleData } from 'eazychart-core/src'; +import Bar from '@/components/shapes/Bar'; + +@Component({ components: { Bar } }) +export default class StackedBars extends Vue { + @InjectReactive('chart') + private chart!: ChartContext; + + @InjectReactive('cartesianScale') + private cartesianScale!: { + xScale: ScaleLinearOrBand; + yScale: ScaleLinearOrBand; + }; + + @Prop({ + type: String, + required: true, + }) + private readonly singleDomainKey!: string; + + @Prop({ + type: Array, + required: true, + }) + private readonly stackDomainKeys!: string[]; + + @Prop({ + type: String as PropType, + required: true, + }) + private readonly direction: Direction = Direction.VERTICAL; + + get colorScale() { + return this.chart.getScale('colorScale') as ScaleOrdinal; + } + + get scaledDataDict() { + return this.stackDomainKeys.reduce( + (acc: { [key: string]: RectangleDatum[] }, yDomainKey) => { + acc[yDomainKey] = scaleRectangleData( + this.chart.data, + this.singleDomainKey, + yDomainKey, + this.cartesianScale.xScale, + this.cartesianScale.yScale, + this.colorScale, + this.chart.dimensions, + this.chart.isRTL, + ); + return acc; + }, + {}, + ); + } + + render() { + const { + scaledDataDict, chart, stackDomainKeys, colorScale, direction, + } = this; + + return ( + + {chart.data.map((_datum, idx) => ( + // The Domain keys still needs to be sorted. + // We create a bar for every data row + // Each bar is a stack bar where every element is a domain key. + + {stackDomainKeys.map((yDomainKey, domainIdx) => { + const color = colorScale.scale(yDomainKey); + const scaledData = scaledDataDict[yDomainKey][idx]; + // The first domain key will not be affected. + const previousRectWidth = domainIdx !== 0 + ? scaledDataDict[stackDomainKeys[domainIdx - 1]][idx].width + : 0; + const previousRectHeight = domainIdx !== 0 + ? scaledDataDict[stackDomainKeys[domainIdx - 1]][idx].height + : 0; + // The height or the width of the current bar will be computed depending + // to the orientaion + // the height will be currentDKHeight - previousDKHeight (same for the width) + const shapeDatum = { + ...scaledData, + width: + direction === Direction.HORIZONTAL + ? scaledData.width - previousRectWidth + : scaledData.width, + height: + direction === Direction.VERTICAL + ? scaledData.height - previousRectHeight + : scaledData.height, + }; + + return ( + + ); + })} + + ))} + + ); + } +} diff --git a/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx b/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx index 2dd20c2..9514eb6 100644 --- a/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx +++ b/packages/ez-vue/src/recipes/column/ColumnChart.stories.tsx @@ -5,6 +5,7 @@ import { } from 'eazychart-dev/storybook/data'; import ColumnChart from './ColumnChart'; import LineColumnChart from './LineColumnChart'; +import StackedColumnChart from './StackedColumnChart'; const meta: Meta = { title: 'Vue/Column Chart', @@ -38,6 +39,17 @@ const LineColumnTemplate: Story = (_args, { argTypes }) => ({ `, }); +const StackedColumnTemplate: Story = (_args, { argTypes }) => ({ + title: 'StackedColumn', + components: { StackedColumnChart, ChartWrapper }, + props: Object.keys(argTypes), + template: ` + + + + `, +}); + // By passing using the Args format for exported stories, // you can control the props for a component for reuse in a test // https://storybook.js.org/docs/vue/workflows/unit-testing @@ -84,3 +96,16 @@ const lineColumnArguments = { }; LineColumn.args = lineColumnArguments; + +export const StackedColumn = StackedColumnTemplate.bind({}); + +const StackedColumnArguments = { + ...defaultArguments, + yAxis: { + domainKeys: ['value', 'value1', 'value2'], + title: 'Temperature', + tickFormat: (d: number) => `${d}°`, + }, +}; + +StackedColumn.args = StackedColumnArguments; diff --git a/packages/ez-vue/src/recipes/column/StackedColumnChart.tsx b/packages/ez-vue/src/recipes/column/StackedColumnChart.tsx new file mode 100644 index 0000000..c712a1a --- /dev/null +++ b/packages/ez-vue/src/recipes/column/StackedColumnChart.tsx @@ -0,0 +1,212 @@ +import { PropType } from 'vue'; +import Component, { mixins } from 'vue-class-component'; +import { + AnimationOptions, + ChartPadding, + Direction, + Position, + RawData, + GridConfig, + AxisConfig, + Dimensions, + AxisConfigMulti, +} from 'eazychart-core/src/types'; +import { Prop } from 'vue-property-decorator'; +import { ScaleBand, ScaleLinear } from 'eazychart-core/src'; +import Chart from '@/components/Chart'; +import Axis from '@/components/scales/Axis'; +import Legend from '@/components/addons/legend/Legend'; +import Tooltip from '@/components/addons/tooltip/Tooltip'; +import StackedBars from '@/components/StackedBars'; +import Grid from '@/components/scales/grid/Grid'; +import ColorScale from '@/components/scales/ColorScale'; +import CartesianScale from '@/components/scales/CartesianScale'; +import ToggleDomainKeyMixin from '@/lib/ToggleDomainKeyMixin'; + +@Component({ + components: { + Chart, + Grid, + StackedBars, + Axis, + Legend, + Tooltip, + }, +}) +export default class StackedColumnChart extends mixins(ToggleDomainKeyMixin) { + @Prop({ + type: Array as PropType, + required: true, + }) + private readonly data!: RawData; + + @Prop({ + type: Array, + default() { + return ['#339999', '#993399', '#333399']; + }, + }) + private readonly colors!: string[]; + + @Prop({ + type: Object as PropType, + default() { + return {}; + }, + }) + private readonly dimensions!: Partial; + + @Prop({ + type: Object as PropType, + default() { + return { + easing: 'easeBack', + duration: 400, + delay: 0, + }; + }, + }) + private readonly animationOptions!: AnimationOptions; + + @Prop({ + type: Object as PropType, + default() { + return { + left: 150, + bottom: 100, + right: 150, + top: 100, + }; + }, + }) + private readonly padding!: ChartPadding; + + @Prop({ + type: Object as PropType, + default() { + return { + directions: [Direction.HORIZONTAL, Direction.VERTICAL], + color: '#a8a8a8', + }; + }, + }) + private readonly grid!: GridConfig; + + @Prop({ + type: Object as PropType>, + default() { + return { + domainKey: 'name', + }; + }, + }) + private readonly xAxis!: AxisConfig; + + @Prop({ + type: Object as PropType>, + default() { + return { + domainKeys: ['value', 'value1', 'value2'], + }; + }, + }) + private readonly yAxis!: AxisConfigMulti; + + @Prop({ + type: Boolean, + default() { + return false; + }, + }) + private readonly isRTL!: boolean; + + getData(): RawData { + return this.data; + } + + getDomainKeys(): string[] { + return this.yAxis.domainKeys; + } + + render() { + const { + xAxis, + yAxis, + data, + colors, + padding, + animationOptions, + grid, + isRTL, + $scopedSlots, + dimensions, + activeDomain, + activeDomainKeys, + toggleDomainKey, + } = this; + + const scopedSlots = { + Legend: $scopedSlots.Legend + ? $scopedSlots.Legend + : () => , + Tooltip: $scopedSlots.Tooltip, + }; + return ( + + + + + + + + + + + ); + } +} From b677c081c89dd850475e700c2c30afc6560b84d8 Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Thu, 27 Oct 2022 17:17:52 +0100 Subject: [PATCH 13/20] fix(partial): bug investigation --- packages/ez-vue/src/components/Chart.tsx | 1 + packages/ez-vue/src/components/addons/legend/Legend.tsx | 1 + packages/ez-vue/src/components/scales/ColorScale.tsx | 5 ++++- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/ez-vue/src/components/Chart.tsx b/packages/ez-vue/src/components/Chart.tsx index 9bf91f0..9db392f 100644 --- a/packages/ez-vue/src/components/Chart.tsx +++ b/packages/ez-vue/src/components/Chart.tsx @@ -191,6 +191,7 @@ export default class Chart extends Vue { // access the color domain for example. Otherwise, we would need to add a portal // which is still experimental in react + does not exist in Vue2. registerScale(scaleId: string, scale: AnyScale) { + // console.log('hanii lennaa', scale.scale.domain()); this.scales = { ...this.scales, [scaleId]: scale, diff --git a/packages/ez-vue/src/components/addons/legend/Legend.tsx b/packages/ez-vue/src/components/addons/legend/Legend.tsx index 0572cb7..555594c 100644 --- a/packages/ez-vue/src/components/addons/legend/Legend.tsx +++ b/packages/ez-vue/src/components/addons/legend/Legend.tsx @@ -44,6 +44,7 @@ export default class Legend extends Vue { } get colorScale() { + // console.log('sayabna 3aad', this.chart.getScale('colorScale')?.scale.domain()) return this.chart.getScale('colorScale'); } diff --git a/packages/ez-vue/src/components/scales/ColorScale.tsx b/packages/ez-vue/src/components/scales/ColorScale.tsx index d3f561a..157b510 100644 --- a/packages/ez-vue/src/components/scales/ColorScale.tsx +++ b/packages/ez-vue/src/components/scales/ColorScale.tsx @@ -24,13 +24,15 @@ export default class ColorScale extends Vue { }) private readonly definition!: ScaleOrdinalDefinition; - mounted() { + created() { this.colorScale = this.defineScale(); this.chart.registerScale('colorScale', this.colorScale); + // console.log('mounted', this.colorScale?.scale.domain()); } updated() { this.colorScale = this.defineScale(); + // console.log('hohaa', this.colorScale.scale.domain()); } @Watch('chart.dimensions') @@ -38,6 +40,7 @@ export default class ColorScale extends Vue { recomputeScale() { const { dimensions, data } = this.chart; this.colorScale.computeScale(dimensions, data); + // console.log('hehe', this.colorScale.scale.domain()); } defineScale() { From 8251b65b0e86ebf13fe06c22bfcca939eb7413b8 Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Fri, 28 Oct 2022 17:37:18 +0100 Subject: [PATCH 14/20] feat(partial): stacked column chart (vue) --- packages/ez-vue/src/components/Chart.tsx | 1 - packages/ez-vue/src/components/addons/legend/Legend.tsx | 1 - packages/ez-vue/src/components/scales/ColorScale.tsx | 3 --- 3 files changed, 5 deletions(-) diff --git a/packages/ez-vue/src/components/Chart.tsx b/packages/ez-vue/src/components/Chart.tsx index 9db392f..9bf91f0 100644 --- a/packages/ez-vue/src/components/Chart.tsx +++ b/packages/ez-vue/src/components/Chart.tsx @@ -191,7 +191,6 @@ export default class Chart extends Vue { // access the color domain for example. Otherwise, we would need to add a portal // which is still experimental in react + does not exist in Vue2. registerScale(scaleId: string, scale: AnyScale) { - // console.log('hanii lennaa', scale.scale.domain()); this.scales = { ...this.scales, [scaleId]: scale, diff --git a/packages/ez-vue/src/components/addons/legend/Legend.tsx b/packages/ez-vue/src/components/addons/legend/Legend.tsx index 555594c..0572cb7 100644 --- a/packages/ez-vue/src/components/addons/legend/Legend.tsx +++ b/packages/ez-vue/src/components/addons/legend/Legend.tsx @@ -44,7 +44,6 @@ export default class Legend extends Vue { } get colorScale() { - // console.log('sayabna 3aad', this.chart.getScale('colorScale')?.scale.domain()) return this.chart.getScale('colorScale'); } diff --git a/packages/ez-vue/src/components/scales/ColorScale.tsx b/packages/ez-vue/src/components/scales/ColorScale.tsx index 157b510..24c8cbe 100644 --- a/packages/ez-vue/src/components/scales/ColorScale.tsx +++ b/packages/ez-vue/src/components/scales/ColorScale.tsx @@ -27,12 +27,10 @@ export default class ColorScale extends Vue { created() { this.colorScale = this.defineScale(); this.chart.registerScale('colorScale', this.colorScale); - // console.log('mounted', this.colorScale?.scale.domain()); } updated() { this.colorScale = this.defineScale(); - // console.log('hohaa', this.colorScale.scale.domain()); } @Watch('chart.dimensions') @@ -40,7 +38,6 @@ export default class ColorScale extends Vue { recomputeScale() { const { dimensions, data } = this.chart; this.colorScale.computeScale(dimensions, data); - // console.log('hehe', this.colorScale.scale.domain()); } defineScale() { From 0a3a09bc4e7a22154670d3b5d9caea8a66502a8c Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Thu, 27 Oct 2022 17:17:52 +0100 Subject: [PATCH 15/20] fix(partial): bug investigation --- packages/ez-vue/src/components/Chart.tsx | 1 + packages/ez-vue/src/components/addons/legend/Legend.tsx | 1 + packages/ez-vue/src/components/scales/ColorScale.tsx | 3 +++ 3 files changed, 5 insertions(+) diff --git a/packages/ez-vue/src/components/Chart.tsx b/packages/ez-vue/src/components/Chart.tsx index 9bf91f0..9db392f 100644 --- a/packages/ez-vue/src/components/Chart.tsx +++ b/packages/ez-vue/src/components/Chart.tsx @@ -191,6 +191,7 @@ export default class Chart extends Vue { // access the color domain for example. Otherwise, we would need to add a portal // which is still experimental in react + does not exist in Vue2. registerScale(scaleId: string, scale: AnyScale) { + // console.log('hanii lennaa', scale.scale.domain()); this.scales = { ...this.scales, [scaleId]: scale, diff --git a/packages/ez-vue/src/components/addons/legend/Legend.tsx b/packages/ez-vue/src/components/addons/legend/Legend.tsx index 0572cb7..555594c 100644 --- a/packages/ez-vue/src/components/addons/legend/Legend.tsx +++ b/packages/ez-vue/src/components/addons/legend/Legend.tsx @@ -44,6 +44,7 @@ export default class Legend extends Vue { } get colorScale() { + // console.log('sayabna 3aad', this.chart.getScale('colorScale')?.scale.domain()) return this.chart.getScale('colorScale'); } diff --git a/packages/ez-vue/src/components/scales/ColorScale.tsx b/packages/ez-vue/src/components/scales/ColorScale.tsx index 24c8cbe..157b510 100644 --- a/packages/ez-vue/src/components/scales/ColorScale.tsx +++ b/packages/ez-vue/src/components/scales/ColorScale.tsx @@ -27,10 +27,12 @@ export default class ColorScale extends Vue { created() { this.colorScale = this.defineScale(); this.chart.registerScale('colorScale', this.colorScale); + // console.log('mounted', this.colorScale?.scale.domain()); } updated() { this.colorScale = this.defineScale(); + // console.log('hohaa', this.colorScale.scale.domain()); } @Watch('chart.dimensions') @@ -38,6 +40,7 @@ export default class ColorScale extends Vue { recomputeScale() { const { dimensions, data } = this.chart; this.colorScale.computeScale(dimensions, data); + // console.log('hehe', this.colorScale.scale.domain()); } defineScale() { From ff022d2f48a096cbd2956abd735e3d467d36af4c Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Fri, 28 Oct 2022 17:39:06 +0100 Subject: [PATCH 16/20] feat(partial): stacked column chart (vue) --- packages/ez-vue/src/components/Chart.tsx | 1 - packages/ez-vue/src/components/addons/legend/Legend.tsx | 1 - packages/ez-vue/src/components/scales/ColorScale.tsx | 3 --- 3 files changed, 5 deletions(-) diff --git a/packages/ez-vue/src/components/Chart.tsx b/packages/ez-vue/src/components/Chart.tsx index 9db392f..9bf91f0 100644 --- a/packages/ez-vue/src/components/Chart.tsx +++ b/packages/ez-vue/src/components/Chart.tsx @@ -191,7 +191,6 @@ export default class Chart extends Vue { // access the color domain for example. Otherwise, we would need to add a portal // which is still experimental in react + does not exist in Vue2. registerScale(scaleId: string, scale: AnyScale) { - // console.log('hanii lennaa', scale.scale.domain()); this.scales = { ...this.scales, [scaleId]: scale, diff --git a/packages/ez-vue/src/components/addons/legend/Legend.tsx b/packages/ez-vue/src/components/addons/legend/Legend.tsx index 555594c..0572cb7 100644 --- a/packages/ez-vue/src/components/addons/legend/Legend.tsx +++ b/packages/ez-vue/src/components/addons/legend/Legend.tsx @@ -44,7 +44,6 @@ export default class Legend extends Vue { } get colorScale() { - // console.log('sayabna 3aad', this.chart.getScale('colorScale')?.scale.domain()) return this.chart.getScale('colorScale'); } diff --git a/packages/ez-vue/src/components/scales/ColorScale.tsx b/packages/ez-vue/src/components/scales/ColorScale.tsx index 157b510..24c8cbe 100644 --- a/packages/ez-vue/src/components/scales/ColorScale.tsx +++ b/packages/ez-vue/src/components/scales/ColorScale.tsx @@ -27,12 +27,10 @@ export default class ColorScale extends Vue { created() { this.colorScale = this.defineScale(); this.chart.registerScale('colorScale', this.colorScale); - // console.log('mounted', this.colorScale?.scale.domain()); } updated() { this.colorScale = this.defineScale(); - // console.log('hohaa', this.colorScale.scale.domain()); } @Watch('chart.dimensions') @@ -40,7 +38,6 @@ export default class ColorScale extends Vue { recomputeScale() { const { dimensions, data } = this.chart; this.colorScale.computeScale(dimensions, data); - // console.log('hehe', this.colorScale.scale.domain()); } defineScale() { From 2188d23890bb1f1a2461e907fab5201e4fff31d9 Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Thu, 27 Oct 2022 17:17:52 +0100 Subject: [PATCH 17/20] fix(partial): bug investigation --- packages/ez-vue/src/components/Chart.tsx | 1 + packages/ez-vue/src/components/addons/legend/Legend.tsx | 1 + packages/ez-vue/src/components/scales/ColorScale.tsx | 3 +++ 3 files changed, 5 insertions(+) diff --git a/packages/ez-vue/src/components/Chart.tsx b/packages/ez-vue/src/components/Chart.tsx index 9bf91f0..9db392f 100644 --- a/packages/ez-vue/src/components/Chart.tsx +++ b/packages/ez-vue/src/components/Chart.tsx @@ -191,6 +191,7 @@ export default class Chart extends Vue { // access the color domain for example. Otherwise, we would need to add a portal // which is still experimental in react + does not exist in Vue2. registerScale(scaleId: string, scale: AnyScale) { + // console.log('hanii lennaa', scale.scale.domain()); this.scales = { ...this.scales, [scaleId]: scale, diff --git a/packages/ez-vue/src/components/addons/legend/Legend.tsx b/packages/ez-vue/src/components/addons/legend/Legend.tsx index 0572cb7..555594c 100644 --- a/packages/ez-vue/src/components/addons/legend/Legend.tsx +++ b/packages/ez-vue/src/components/addons/legend/Legend.tsx @@ -44,6 +44,7 @@ export default class Legend extends Vue { } get colorScale() { + // console.log('sayabna 3aad', this.chart.getScale('colorScale')?.scale.domain()) return this.chart.getScale('colorScale'); } diff --git a/packages/ez-vue/src/components/scales/ColorScale.tsx b/packages/ez-vue/src/components/scales/ColorScale.tsx index 24c8cbe..157b510 100644 --- a/packages/ez-vue/src/components/scales/ColorScale.tsx +++ b/packages/ez-vue/src/components/scales/ColorScale.tsx @@ -27,10 +27,12 @@ export default class ColorScale extends Vue { created() { this.colorScale = this.defineScale(); this.chart.registerScale('colorScale', this.colorScale); + // console.log('mounted', this.colorScale?.scale.domain()); } updated() { this.colorScale = this.defineScale(); + // console.log('hohaa', this.colorScale.scale.domain()); } @Watch('chart.dimensions') @@ -38,6 +40,7 @@ export default class ColorScale extends Vue { recomputeScale() { const { dimensions, data } = this.chart; this.colorScale.computeScale(dimensions, data); + // console.log('hehe', this.colorScale.scale.domain()); } defineScale() { From 5045074791cc3d3fb2202885cb14045fd6e295cb Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Fri, 28 Oct 2022 17:37:18 +0100 Subject: [PATCH 18/20] feat(partial): stacked column chart (vue) --- packages/ez-vue/src/components/Chart.tsx | 1 - packages/ez-vue/src/components/addons/legend/Legend.tsx | 1 - packages/ez-vue/src/components/scales/ColorScale.tsx | 3 --- 3 files changed, 5 deletions(-) diff --git a/packages/ez-vue/src/components/Chart.tsx b/packages/ez-vue/src/components/Chart.tsx index 9db392f..9bf91f0 100644 --- a/packages/ez-vue/src/components/Chart.tsx +++ b/packages/ez-vue/src/components/Chart.tsx @@ -191,7 +191,6 @@ export default class Chart extends Vue { // access the color domain for example. Otherwise, we would need to add a portal // which is still experimental in react + does not exist in Vue2. registerScale(scaleId: string, scale: AnyScale) { - // console.log('hanii lennaa', scale.scale.domain()); this.scales = { ...this.scales, [scaleId]: scale, diff --git a/packages/ez-vue/src/components/addons/legend/Legend.tsx b/packages/ez-vue/src/components/addons/legend/Legend.tsx index 555594c..0572cb7 100644 --- a/packages/ez-vue/src/components/addons/legend/Legend.tsx +++ b/packages/ez-vue/src/components/addons/legend/Legend.tsx @@ -44,7 +44,6 @@ export default class Legend extends Vue { } get colorScale() { - // console.log('sayabna 3aad', this.chart.getScale('colorScale')?.scale.domain()) return this.chart.getScale('colorScale'); } diff --git a/packages/ez-vue/src/components/scales/ColorScale.tsx b/packages/ez-vue/src/components/scales/ColorScale.tsx index 157b510..24c8cbe 100644 --- a/packages/ez-vue/src/components/scales/ColorScale.tsx +++ b/packages/ez-vue/src/components/scales/ColorScale.tsx @@ -27,12 +27,10 @@ export default class ColorScale extends Vue { created() { this.colorScale = this.defineScale(); this.chart.registerScale('colorScale', this.colorScale); - // console.log('mounted', this.colorScale?.scale.domain()); } updated() { this.colorScale = this.defineScale(); - // console.log('hohaa', this.colorScale.scale.domain()); } @Watch('chart.dimensions') @@ -40,7 +38,6 @@ export default class ColorScale extends Vue { recomputeScale() { const { dimensions, data } = this.chart; this.colorScale.computeScale(dimensions, data); - // console.log('hehe', this.colorScale.scale.domain()); } defineScale() { From f685e0308aa6150c8acdc42b26d2f4e153c9e05a Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Thu, 27 Oct 2022 17:17:52 +0100 Subject: [PATCH 19/20] fix(partial): bug investigation --- packages/ez-vue/src/components/Chart.tsx | 1 + packages/ez-vue/src/components/addons/legend/Legend.tsx | 1 + packages/ez-vue/src/components/scales/ColorScale.tsx | 3 +++ 3 files changed, 5 insertions(+) diff --git a/packages/ez-vue/src/components/Chart.tsx b/packages/ez-vue/src/components/Chart.tsx index 9bf91f0..9db392f 100644 --- a/packages/ez-vue/src/components/Chart.tsx +++ b/packages/ez-vue/src/components/Chart.tsx @@ -191,6 +191,7 @@ export default class Chart extends Vue { // access the color domain for example. Otherwise, we would need to add a portal // which is still experimental in react + does not exist in Vue2. registerScale(scaleId: string, scale: AnyScale) { + // console.log('hanii lennaa', scale.scale.domain()); this.scales = { ...this.scales, [scaleId]: scale, diff --git a/packages/ez-vue/src/components/addons/legend/Legend.tsx b/packages/ez-vue/src/components/addons/legend/Legend.tsx index 0572cb7..555594c 100644 --- a/packages/ez-vue/src/components/addons/legend/Legend.tsx +++ b/packages/ez-vue/src/components/addons/legend/Legend.tsx @@ -44,6 +44,7 @@ export default class Legend extends Vue { } get colorScale() { + // console.log('sayabna 3aad', this.chart.getScale('colorScale')?.scale.domain()) return this.chart.getScale('colorScale'); } diff --git a/packages/ez-vue/src/components/scales/ColorScale.tsx b/packages/ez-vue/src/components/scales/ColorScale.tsx index 24c8cbe..157b510 100644 --- a/packages/ez-vue/src/components/scales/ColorScale.tsx +++ b/packages/ez-vue/src/components/scales/ColorScale.tsx @@ -27,10 +27,12 @@ export default class ColorScale extends Vue { created() { this.colorScale = this.defineScale(); this.chart.registerScale('colorScale', this.colorScale); + // console.log('mounted', this.colorScale?.scale.domain()); } updated() { this.colorScale = this.defineScale(); + // console.log('hohaa', this.colorScale.scale.domain()); } @Watch('chart.dimensions') @@ -38,6 +40,7 @@ export default class ColorScale extends Vue { recomputeScale() { const { dimensions, data } = this.chart; this.colorScale.computeScale(dimensions, data); + // console.log('hehe', this.colorScale.scale.domain()); } defineScale() { From 7773d6f586312509fc6dca79b51c0690690e1c9a Mon Sep 17 00:00:00 2001 From: IlyesBENAMARA Date: Fri, 28 Oct 2022 17:39:06 +0100 Subject: [PATCH 20/20] feat(partial): stacked column chart (vue) --- packages/ez-vue/src/components/Chart.tsx | 1 - packages/ez-vue/src/components/addons/legend/Legend.tsx | 1 - packages/ez-vue/src/components/scales/ColorScale.tsx | 3 --- 3 files changed, 5 deletions(-) diff --git a/packages/ez-vue/src/components/Chart.tsx b/packages/ez-vue/src/components/Chart.tsx index 9db392f..9bf91f0 100644 --- a/packages/ez-vue/src/components/Chart.tsx +++ b/packages/ez-vue/src/components/Chart.tsx @@ -191,7 +191,6 @@ export default class Chart extends Vue { // access the color domain for example. Otherwise, we would need to add a portal // which is still experimental in react + does not exist in Vue2. registerScale(scaleId: string, scale: AnyScale) { - // console.log('hanii lennaa', scale.scale.domain()); this.scales = { ...this.scales, [scaleId]: scale, diff --git a/packages/ez-vue/src/components/addons/legend/Legend.tsx b/packages/ez-vue/src/components/addons/legend/Legend.tsx index 555594c..0572cb7 100644 --- a/packages/ez-vue/src/components/addons/legend/Legend.tsx +++ b/packages/ez-vue/src/components/addons/legend/Legend.tsx @@ -44,7 +44,6 @@ export default class Legend extends Vue { } get colorScale() { - // console.log('sayabna 3aad', this.chart.getScale('colorScale')?.scale.domain()) return this.chart.getScale('colorScale'); } diff --git a/packages/ez-vue/src/components/scales/ColorScale.tsx b/packages/ez-vue/src/components/scales/ColorScale.tsx index 157b510..24c8cbe 100644 --- a/packages/ez-vue/src/components/scales/ColorScale.tsx +++ b/packages/ez-vue/src/components/scales/ColorScale.tsx @@ -27,12 +27,10 @@ export default class ColorScale extends Vue { created() { this.colorScale = this.defineScale(); this.chart.registerScale('colorScale', this.colorScale); - // console.log('mounted', this.colorScale?.scale.domain()); } updated() { this.colorScale = this.defineScale(); - // console.log('hohaa', this.colorScale.scale.domain()); } @Watch('chart.dimensions') @@ -40,7 +38,6 @@ export default class ColorScale extends Vue { recomputeScale() { const { dimensions, data } = this.chart; this.colorScale.computeScale(dimensions, data); - // console.log('hehe', this.colorScale.scale.domain()); } defineScale() {