From 3bad0cfa571cdb56bf3b5eef73351ed3b6ceae62 Mon Sep 17 00:00:00 2001
From: "Mr.Dr.Professor Patrick" <alaev89@yandex-team.ru>
Date: Tue, 5 Sep 2023 12:32:42 +0200
Subject: [PATCH] feat(D3 plugin): add color property to scatter and bar data
 (#265)

feat: add color property to scatter and bar data
---
 src/plugins/d3/renderer/hooks/useShapes/bar-x.tsx   | 2 +-
 src/plugins/d3/renderer/hooks/useShapes/scatter.tsx | 2 +-
 src/types/widget-data/bar-x.ts                      | 1 -
 src/types/widget-data/base.ts                       | 2 ++
 src/types/widget-data/pie.ts                        | 2 --
 5 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/plugins/d3/renderer/hooks/useShapes/bar-x.tsx b/src/plugins/d3/renderer/hooks/useShapes/bar-x.tsx
index cc0b53a2..9b525937 100644
--- 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
index 83d8c88b..103c09d1 100644
--- 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
index ac58666f..052e8019 100644
--- 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
index 49e81cbd..e0f4922f 100644
--- 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
index 56bba303..074d9863 100644
--- 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. */