Update default dot color on LineChart

Author: Psychosynthesis

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@gratio/ui",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "author": "Gratio",
   "license": "MIT",
   "type": "module",

package.json

@@ -19,10 +19,11 @@ export const LineChart: FC<{
   formatLabel: (d: string | number | Date) => string;
   height?: number;
   lineColor?: Color;
+  dotColor?: Color;
   xAxisLabel?: string;
   yAxisLabel?: string;
   valueFormatter?: (value: number) => string;
-}> = ({ data, formatLabel, height = 220, lineColor, xAxisLabel, yAxisLabel, valueFormatter }) => {
+}> = ({ data, formatLabel, height = 220, lineColor, dotColor, xAxisLabel, yAxisLabel, valueFormatter }) => {
   const [tooltip, setTooltip] = useState<TooltipData>(null);
   const themeCtx = useTheme();
 
@@ -33,7 +34,7 @@ export const LineChart: FC<{
   const gradientEndColor = 'transparent';
   const gridColor = themeCtx?.theme?.main?.border || '#e0e0e0';
   const textColor = themeCtx?.theme?.text?.primary || '#606060';
-  const dotColor = themeCtx?.theme?.main?.dark || '#83EC4A';
+  const mainDotColor = dotColor ? dotColor : themeCtx?.theme?.main?.primary || '#83EC4A';
   const frameColor = 'transparent';
   const tooltipBackground = themeCtx?.theme?.background?.primary || '#ffffff';
   const tooltipTextColor = themeCtx?.theme?.text?.primary || '#000000';
@@ -249,7 +250,7 @@ export const LineChart: FC<{
                 onMouseLeave={() => handlePointHover(null)}
               />
               {/* Visible dot */}
-              <circle cx={cx} cy={p.y} r="5" fill={dotColor} style={{ pointerEvents: 'none' }} />
+              <circle cx={cx} cy={p.y} r="5" fill={mainDotColor} style={{ pointerEvents: 'none' }} />
             </g>
           );
         })}