feat(D3 plugin): add color property to scatter and bar data (#265)

feat: add color property to scatter and bar data
gravity-ui · Sep 5, 2023 · 3bad0cf · 3bad0cf
1 parent 2170c73
commit 3bad0cf
Show file tree

Hide file tree

Showing 5 changed files with 4 additions and 5 deletions.
diff --git a/src/plugins/d3/renderer/hooks/useShapes/bar-x.tsx b/src/plugins/d3/renderer/hooks/useShapes/bar-x.tsx
@@ -153,7 +153,7 @@ export function BarXSeriesShapes(args: Args) {
                     .attr('y', (d) => d.y)
                     .attr('height', (d) => d.height)
                     .attr('width', (d) => d.width)
-                    .attr('fill', item.color)
+                    .attr('fill', (d) => d.data.color || item.color)
                     .on('mousemove', (e, point) => {
                         const [x, y] = pointer(e, svgContainer);
                         onSeriesMouseMove?.({

diff --git a/src/plugins/d3/renderer/hooks/useShapes/scatter.tsx b/src/plugins/d3/renderer/hooks/useShapes/scatter.tsx
@@ -104,7 +104,7 @@ export function ScatterSeriesShape(props: ScatterSeriesShapeProps) {
             .enter()
             .append('circle')
             .attr('class', b('point'))
-            .attr('fill', series.color || '')
+            .attr('fill', (d) => d.color || series.color || '')
             .attr('r', (d) => d.radius || DEFAULT_SCATTER_POINT_RADIUS)
             .attr('cx', (d) => getCxAttr({point: d, xAxis, xScale}))
             .attr('cy', (d) => getCyAttr({point: d, yAxis, yScale}))

diff --git a/src/types/widget-data/bar-x.ts b/src/types/widget-data/bar-x.ts
@@ -9,7 +9,6 @@ export type BarXSeriesData<T = any> = BaseSeriesData<T> & {
     y?: number;
     /** Corresponding value of axis category */
     category?: string;
-
     /** Data label value of the bar-x column. If not specified, the y value is used. */
     label?: string | number;
 };

diff --git a/src/types/widget-data/base.ts b/src/types/widget-data/base.ts
@@ -24,6 +24,8 @@ export type BaseSeriesData<T = any> = {
      * Here you can add additional data for your own event callbacks and formatter callbacks
      */
     custom?: T;
+    /** Individual color for the data chunk (point in scatter, segment in pie, bar etc) */
+    color?: string;
 };
 
 export type BaseTextStyle = {

diff --git a/src/types/widget-data/pie.ts b/src/types/widget-data/pie.ts
@@ -6,8 +6,6 @@ export type PieSeriesData<T = any> = BaseSeriesData<T> & {
     value: number;
     /** The name of the pie segment (used in legend, tooltip etc). */
     name: string;
-    /** Individual color for the pie segment. */
-    color?: string;
     /** Initial visibility of the pie segment. */
     visible?: boolean;
     /** Initial data label of the pie segment. If not specified, the value is used. */