feat(chart): fixed comments

core-ds · Sep 29, 2021 · 555acb6 · 555acb6
1 parent 67cc96e
commit 555acb6
Show file tree

Hide file tree

Showing 44 changed files with 669 additions and 1,353 deletions.
diff --git a/packages/chart/package-lock.json b/packages/chart/package-lock.json
diff --git a/packages/chart/src/Component.tsx b/packages/chart/src/Component.tsx
diff --git a/packages/chart/src/components/Dot/index.tsx b/packages/chart/src/components/Dot/index.tsx
@@ -1,76 +1,78 @@
 import React, { useState, useEffect } from 'react';
 import cn from 'classnames';
-import PointIcon from '../../icons/Point.icon';
-import { DotProps, DotSettingProps } from '../../types/utils/dot.type';
+import { PointIcon } from '../../icons/Point';
+import { DotProps, DotSettingProps } from '../../types/utils/dot.types';
 
 import styles from './index.module.css';
 
-const Dot = React.forwardRef<SVGSVGElement, DotProps>((props, ref): React.ReactElement | null => {
-    const { cx, cy, index, activeDot, dataKey, dotSettings } = props;
-    const [windowWidth, setWindowWidth] = useState<number>(0);
+export const Dot = React.forwardRef<SVGSVGElement, DotProps>(
+    (
+        { cx, cy, index, activeDot, dataKey, dotSettings, value, stroke },
+        ref,
+    ): React.ReactElement | null => {
+        const [windowWidth, setWindowWidth] = useState<number>(0);
 
-    const [height, setHeight] = useState<number>(0);
-    const [width, setWidth] = useState<number>(0);
-    const [option, setOption] = useState<DotSettingProps | null>(null);
+        const [height, setHeight] = useState<number>(0);
+        const [width, setWidth] = useState<number>(0);
+        const [option, setOption] = useState<DotSettingProps | null>(null);
 
-    useEffect(() => {
-        let dotSetting: DotSettingProps =
-            Array.isArray(dotSettings) && dotSettings.length > 0
-                ? dotSettings.find(item => item.media && windowWidth < item.media)
-                : dotSettings;
+        useEffect(() => {
+            let dotSetting: DotSettingProps =
+                Array.isArray(dotSettings) && dotSettings.length > 0
+                    ? dotSettings.find(item => item.media && windowWidth < item.media)
+                    : dotSettings;
 
-        if (Array.isArray(dotSettings) && dotSettings.length > 0 && !dotSetting) {
-            dotSetting = dotSettings[dotSettings.length - 1];
-        }
+            if (Array.isArray(dotSettings) && dotSettings.length > 0 && !dotSetting) {
+                dotSetting = dotSettings[dotSettings.length - 1];
+            }
 
-        setWindowWidth(window.innerWidth);
-        setOption(dotSetting);
-    }, [dotSettings, windowWidth]);
+            setWindowWidth(window.innerWidth);
+            setOption(dotSetting);
+        }, [dotSettings, windowWidth]);
 
-    useEffect(() => {
-        if (!option) return;
+        useEffect(() => {
+            if (!option) return;
 
-        if (typeof activeDot === 'number' && activeDot === index) {
-            setHeight(option.height * option.scale);
-            setWidth(option.width * option.scale);
-        } else {
-            setHeight(option.height * option.initScale);
-            setWidth(option.width * option.initScale);
-        }
-    }, [activeDot, index, option]);
+            if (typeof activeDot === 'number' && activeDot === index) {
+                setHeight(option.height * option.scale);
+                setWidth(option.width * option.scale);
+            } else {
+                setHeight(option.height * option.initScale);
+                setWidth(option.width * option.initScale);
+            }
+        }, [activeDot, index, option]);
 
-    if (!props.value) return null;
+        if (!value) return null;
 
-    return (
-        <g
-            ref={ref}
-            className={cn(styles.dot)}
-            transform={`translate(${cx - width / 2}, ${cy - height / 2})`}
-        >
+        return (
             <g
-                className={cn(styles.dotWrap)}
-                transform={`scale(${
-                    activeDot === index ? option?.scale || 0 : option?.initScale || 0
-                })`}
+                ref={ref}
+                className={cn(styles.dot)}
+                transform={`translate(${cx - width / 2}, ${cy - height / 2})`}
             >
-                <svg
-                    className={cn(
-                        styles.dotItem,
-                        activeDot === index ? styles.dotActive : '',
-                        typeof activeDot === 'number' && activeDot !== index
-                            ? styles.dotUnfocused
-                            : '',
-                    )}
-                    data-id={index}
-                    data-name={dataKey}
-                    width={option?.width || 0}
-                    height={option?.height || 0}
+                <g
+                    className={cn(styles.dotWrap)}
+                    transform={`scale(${
+                        activeDot === index ? option?.scale || 0 : option?.initScale || 0
+                    })`}
                 >
-                    <PointIcon fill={props?.stroke} />
-                </svg>
+                    <svg
+                        className={cn(
+                            styles.dotItem,
+                            activeDot === index ? styles.dotActive : '',
+                            typeof activeDot === 'number' && activeDot !== index
+                                ? styles.dotUnfocused
+                                : '',
+                        )}
+                        data-id={index}
+                        data-name={dataKey}
+                        width={option?.width || 0}
+                        height={option?.height || 0}
+                    >
+                        <PointIcon fill={stroke} />
+                    </svg>
+                </g>
             </g>
-        </g>
-    );
-});
-
-export default Dot;
+        );
+    },
+);
diff --git a/packages/chart/src/components/Legends/index.module.css b/packages/chart/src/components/Legends/index.module.css
@@ -1,4 +1,4 @@
-@import '../../../../vars/src/index.css';
+@import '../../../../themes/src/default.css';
 
 .legendContent {
     display: flex;

diff --git a/packages/chart/src/components/Legends/index.tsx b/packages/chart/src/components/Legends/index.tsx
@@ -1,45 +1,48 @@
 import React from 'react';
 import cn from 'classnames';
 import { Typography } from '@alfalab/core-components-typography';
-import { LegendComponentProps } from '../../types/legend.type';
-import { SeriaProps } from '../../types/seria.type';
 
-// icons
-import CircleIcon from '../../icons/Circle.icon';
-import CircleLineIcon from '../../icons/CircleLine.icon';
-import FilledCircleIcon from '../../icons/FilledCircle.icon';
-import StrokeCircleIcon from '../../icons/StrokeCircle.icon';
+import { DataDynamicBooleanProps } from '../../types/utils/data.types';
+import { LegendProps } from '../../types/legend.types';
+import { SeriaProps } from '../../types/seria.types';
+
+import { CircleIcon } from '../../icons/Circle';
+import { CircleLineIcon } from '../../icons/CircleLine';
+import { FilledCircleIcon } from '../../icons/FilledCircle';
+import { StrokeCircleIcon } from '../../icons/StrokeCircle';
 
 import styles from './index.module.css';
 
-const Legends = React.forwardRef<HTMLUListElement, LegendComponentProps>(
+interface Props {
+    legend: LegendProps;
+    series: SeriaProps[];
+    id: string;
+    charts: DataDynamicBooleanProps;
+    toggleChart(item: SeriaProps): void;
+}
+
+const icons = {
+    circleLine: CircleLineIcon,
+    filledCircle: FilledCircleIcon,
+    strokeCircle: StrokeCircleIcon,
+    circle: CircleIcon,
+};
+
+export const Legends = React.forwardRef<HTMLUListElement, Props>(
     ({ legend, series, id, charts, toggleChart }, ref): React.ReactElement => {
         const style: React.CSSProperties = {
             textAlign: legend.align || 'center',
             transform: `translateY(${(legend?.marginTop ? legend.marginTop : 0) *
                 (legend.verticalAlign === 'top' ? -1 : 1)}px)`,
         };
 
-        const getIcon = (type: string) => {
-            switch (type) {
-                case 'circleLine':
-                    return CircleLineIcon;
-                case 'filledCircle':
-                    return FilledCircleIcon;
-                case 'strokeCircle':
-                    return StrokeCircleIcon;
-                case 'circle':
-                default:
-                    return CircleIcon;
-            }
-        };
-
         return (
             <ul ref={ref} className={cn(styles.legendWrap)} style={style}>
                 {series.map((item: SeriaProps) => {
                     if (item.hideLegend || item.hide) return null;
 
-                    const Icon = getIcon(item.icon);
+                    const Icon = icons[item.icon] || CircleIcon;
+
                     return (
                         <li
                             role='presentation'
@@ -78,5 +81,3 @@ const Legends = React.forwardRef<HTMLUListElement, LegendComponentProps>(
         );
     },
 );
-
-export default Legends;
diff --git a/packages/chart/src/components/LinearGradient.tsx b/packages/chart/src/components/LinearGradient.tsx
@@ -1,22 +1,17 @@
 import React from 'react';
-import { GradientProps, LinearGradientProps } from '../types/utils/gradient.type';
+import { GradientProps, LinearGradientProps } from '../types/utils/gradient.types';
 
-const LinearGradient = ({ id, gid, points }: LinearGradientProps): React.ReactElement => {
+export const LinearGradient = ({ id, gid, points }: LinearGradientProps): React.ReactElement => {
     return (
         <linearGradient key={`${id}-${gid}`} id={`${id}-${gid}`} x1='0' y1='0' x2='0' y2='1'>
-            {points.map((point: GradientProps, index: number) => {
-                const key = `${id}${gid}-${index}`;
-                return (
-                    <stop
-                        key={key}
-                        offset={`${point.offset}%`}
-                        stopColor={point.stopColor}
-                        stopOpacity={point.stopOpacity}
-                    />
-                );
-            })}
+            {points.map((point: GradientProps, index: number) => (
+                <stop
+                    key={`${id}${gid}-${index.toString()}`}
+                    offset={`${point.offset}%`}
+                    stopColor={point.stopColor}
+                    stopOpacity={point.stopOpacity}
+                />
+            ))}
         </linearGradient>
     );
 };
-
-export default LinearGradient;
diff --git a/packages/chart/src/components/Tick/index.module.css b/packages/chart/src/components/Tick/index.module.css
@@ -1,7 +1,12 @@
 @import '../../../../themes/src/default.css';
+@import '../../../../vars//src//typography.css';
 
 .tickText {
     fill: var(--color-light-text-primary);
-    font-size: 16px;
-    line-height: 22px;
+    @mixin paragraph_primary_medium;
+}
+
+.circle {
+    opacity: 0.3;
+    fill: var(--color-dark-bg-primary);
 }
diff --git a/packages/chart/src/components/Tick/index.tsx b/packages/chart/src/components/Tick/index.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import cn from 'classnames';
-import { TickProps } from '../../types/utils/tick.type';
+import { TickProps } from '../../types/utils/tick.types';
 
 import styles from './index.module.css';
 
-const Tick = (props: TickProps) => {
-    const { y, payload, tickFormatter, xAxis } = props;
+export const Tick = ({ y, payload, tickFormatter, xAxis }: TickProps) => {
     const radius = 4;
 
     const marginTick =
@@ -23,12 +22,10 @@ const Tick = (props: TickProps) => {
                 (typeof marginTick === 'number' ? marginTick : 0) -
                 radius * 2})`}
         >
-            <text className={cn(styles.tickText)} y='15' dy='0.71em'>
+            <text className={cn(styles.tickText)} y='30'>
                 {tickFormatter ? tickFormatter(payload.value) : payload.value}
             </text>
-            <circle r={radius} fill='#0B1F35' opacity='0.3' />
+            <circle r={radius} className={cn(styles.circle)} />
         </g>
     );
 };
-
-export default Tick;
diff --git a/packages/chart/src/components/TooltipContent/index.tsx b/packages/chart/src/components/TooltipContent/index.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import cn from 'classnames';
 import { Typography } from '@alfalab/core-components-typography';
 
-import { PayloadProps } from '../../types/payload.type';
-import { SeriaProps } from '../../types/seria.type';
-import { TooltipProps } from '../../types/tooltip.type';
+import { PayloadProps } from '../../types/payload.types';
+import { SeriaProps } from '../../types/seria.types';
+import { TooltipProps } from '../../types/tooltip.types';
 
 import styles from './index.module.css';
 
@@ -13,8 +13,16 @@ export interface TooltipContentProps extends TooltipProps {
     series: SeriaProps[];
 }
 
-const TooltipContent = (props: TooltipContentProps) => {
-    const { payload, label, tooltipArrowSide, arrow, series, labelFormatter, labelStyle } = props;
+export const TooltipContent = ({
+    payload,
+    separator,
+    label,
+    tooltipArrowSide,
+    arrow,
+    series,
+    labelFormatter,
+    labelStyle,
+}: TooltipContentProps) => {
     if (!label || payload.length === 0) return null;
 
     return (
@@ -56,7 +64,7 @@ const TooltipContent = (props: TooltipContentProps) => {
                                 className={cn(styles.tooltipValue)}
                             >
                                 {entry?.formatter ? entry.formatter(entry.value) : entry.value}
-                                {props?.separator ? props.separator : ' '}
+                                {separator || ' '}
                             </Typography.Text>
                             <Typography.Text
                                 view='secondary-large'
@@ -70,5 +78,3 @@ const TooltipContent = (props: TooltipContentProps) => {
         </div>
     );
 };
-
-export default React.memo(TooltipContent);
diff --git a/packages/chart/src/docs/Component.stories.mdx b/packages/chart/src/docs/Component.stories.mdx
@@ -454,7 +454,19 @@ import Changelog from '../../CHANGELOG.md';
         return (
             <div style={{ display: 'flex' }}>
                 <div style={{ marginBottom: '20px', top: 25, width: '1050px', height: '600px' }}>
-                    <Chart options={ barChartOptions } />
+                    <Chart
+                        id='bar-chart'
+                        composeChart={ composeChart }
+                        responsiveContainer={ responsiveContainer }
+                        cartesianGrid={ cartesianGrid }
+                        xAxis={ xAxis }
+                        yAxis={ yAxis }
+                        tooltip={ tooltip }
+                        legend={ legend }
+                        brush={ brush }
+                        labels={ labelsBarChart }
+                        series={ [barChartFirst, barChartSecond, lineChart] }
+                    />
                 </div>
                 <div style={{ width: '500px', height: '600px', overflow: 'auto' }}>
                     <pre>
@@ -1241,7 +1253,19 @@ import Changelog from '../../CHANGELOG.md';
         return (
             <div style={{ display: 'flex' }}>
                 <div style={{ marginBottom: '20px', top: 25, width: '1050px', height: '600px' }}>
-                    <Chart options={ lineChartOptions } />
+                    <Chart
+                        id={ 'line-chart' }
+                        composeChart={ composeChart }
+                        responsiveContainer={ responsiveContainer }
+                        cartesianGrid={ cartesianGrid }
+                        xAxis={ xAxis }
+                        yAxis={ yAxis }
+                        tooltip={ tooltip }
+                        legend={ legend }
+                        brush={ brush }
+                        labels={ labelsLineChart }
+                        series={ [lineChart, areaChart] }
+                    />
                 </div>
                 <div style={{ width: '500px', height: '600px', overflow: 'auto' }}>
                     <pre>
@@ -1253,7 +1277,6 @@ import Changelog from '../../CHANGELOG.md';
     })}
 </Story>
 
-
 <!-- Docs -->
 
 <ComponentHeader