feat(ebay-area-chart): refactor existing area chart to design specs (#…

…2358)
eBay · Jan 16, 2025 · 96f2732 · 96f2732
1 parent 2cb19b1
commit 96f2732
Show file tree

Hide file tree

Showing 13 changed files with 778 additions and 569 deletions.
diff --git a/.changeset/sixty-experts-marry.md b/.changeset/sixty-experts-marry.md
@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": minor
+---
+
+Add area chart
diff --git a/src/common/charts/shared.ts b/src/common/charts/shared.ts
@@ -1,8 +1,8 @@
 export const chartFontFamily = '"Market Sans", Arial, sans-serif',
     backgroundColor = "var(--color-background-primary)",
     gridColor = "var(--color-data-viz-grid)",
-    labelsColor = "var(--color-data-viz-labels)",
-    legendColor = "var(--color-data-viz-legend)",
+    labelsColor = "var(--color-foreground-secondary)",
+    legendColor = "var(--color-foreground-primary)",
     legendInactiveColor = "var(--color-data-viz-legend-inactive)",
     legendHoverColor = "var(--color-data-viz-legend-hover)",
     tooltipBackgroundColor = "var(--color-background-primary)",
@@ -79,6 +79,7 @@ export const chartFontFamily = '"Market Sans", Arial, sans-serif',
             const color = strokeColorMapping[i % strokeColorMapping.length];
             series[i].lineColor = color;
             series[i].borderColor = color;
+            series[i].fillOpacity = 1; 
         }
     },
     setDonutColors = function (series: any) {
@@ -110,4 +111,25 @@ export const chartFontFamily = '"Market Sans", Arial, sans-serif',
         });
 
         return colors.map((color: any) => color.lineColor);
+    },
+    setSeriesMarkerStyles = function (series: Highcharts.PlotAreaOptions[]) {
+        series.forEach((s, i) => {
+            s.zIndex = series.length - i;
+            s.marker = {
+                symbol: "circle",
+                lineWidth: 1,
+                fillColor: "black",
+                lineColor: "white",
+                states: {
+                    hover: {
+                        animation: { duration: 0 },
+                        radius: 4,
+                        lineWidth: 2,
+                    },
+                    normal: {
+                        animation: false,
+                    },
+                },
+            };
+        });
     };
diff --git a/src/components/ebay-area-chart/README.md b/src/components/ebay-area-chart/README.md
@@ -8,3 +8,9 @@
 </h1>
 
 The area chart displays one to five series of data points as an interactive stacked area chart
+
+## Examples and Documentation
+
+-   [Storybook](https://ebay.github.io/ebayui-core/?path=/docs/charts-ebay-area-chart)
+-   [Storybook Docs](https://ebay.github.io/ebayui-core/?path=/docs/charts-ebay-area-chart)
+-   [Code Examples](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-area-chart/examples)
diff --git a/src/components/ebay-area-chart/area-chart.stories-ignore.ts b/src/components/ebay-area-chart/area-chart.stories-ignore.ts