@alfalab/core-components-chart 3.1.12 → 3.2.0

package/icons/StrokeCircle.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+import React from 'react';
 type Props = {
     fill?: string;
     height?: number;
 };
-declare const StrokeCircleIcon: ({ fill, height }: Props) => JSX.Element;
+declare const StrokeCircleIcon: ({ fill, height }: Props) => React.JSX.Element;
 export { StrokeCircleIcon };

package/index.css

@@ -1,4 +1,4 @@
-/* hash: jlxo0 */
+/* hash: 402lo */
 :root {
 } /* deprecated */ :root {
     --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,14 +15,14 @@
 } :root {
 } :root {
 } :root {
-} .chart__coreChart_d77qc .recharts-line path {
+} .chart__coreChart_bgqh .recharts-line path {
         transition: d 0.2s ease-out;
-    } .chart__coreChart_d77qc .recharts-text tspan {
+    } .chart__coreChart_bgqh .recharts-text tspan {
         fill: var(--color-light-text-primary);
         font-size: 16px;
         line-height: 22px;
-    } .chart__bar_d77qc {
+    } .chart__bar_bgqh {
     transition: opacity 0.2s ease-out, d 0.2s ease-out;
-} .chart__unfocused_d77qc {
+} .chart__unfocused_bgqh {
     opacity: 0.3;
 }

package/modern/Component.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import React from 'react';
 import { OptionsProps } from "./types/index";
-declare const Chart: (props: OptionsProps) => JSX.Element | null;
+declare const Chart: (props: OptionsProps) => React.JSX.Element | null;
 export { Chart };

package/modern/Component.js

@@ -28,7 +28,7 @@ const CustomizedHOC = (Component, options) => {
     return NewComponent;
 };
 
-const styles = {"coreChart":"chart__coreChart_d77qc","bar":"chart__bar_d77qc","unfocused":"chart__unfocused_d77qc"};
+const styles = {"coreChart":"chart__coreChart_bgqh","bar":"chart__bar_bgqh","unfocused":"chart__unfocused_bgqh"};
 require('./index.css')
 
 /* eslint-disable @typescript-eslint/no-explicit-any */

package/modern/components/Dot/index.css

@@ -1,19 +1,19 @@
-/* hash: 1f14y */
-.chart__dotUnfocused_7l03o {
+/* hash: 15k7m */
+.chart__dotUnfocused_10twu {
     opacity: 0.3;
 }
 
-.chart__dot_7l03o,
-.chart__dotItem_7l03o,
-.chart__dotWrap_7l03o {
+.chart__dot_10twu,
+.chart__dotItem_10twu,
+.chart__dotWrap_10twu {
     transition: all 0.2s ease;
 }
 
-.chart__dot_7l03o {
-    animation: chart__showDot_7l03o 0.5s ease;
+.chart__dot_10twu {
+    animation: chart__showDot_10twu 0.5s ease;
 }
 
-@keyframes chart__showDot_7l03o {
+@keyframes chart__showDot_10twu {
     from {
         opacity: 0;
     }

package/modern/components/Dot/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import cn from 'classnames';
 import { PointIcon } from '../../icons/Point.js';
 
-const styles = {"dotUnfocused":"chart__dotUnfocused_7l03o","dot":"chart__dot_7l03o","dotItem":"chart__dotItem_7l03o","dotWrap":"chart__dotWrap_7l03o","showDot":"chart__showDot_7l03o"};
+const styles = {"dotUnfocused":"chart__dotUnfocused_10twu","dot":"chart__dot_10twu","dotItem":"chart__dotItem_10twu","dotWrap":"chart__dotWrap_10twu","showDot":"chart__showDot_10twu"};
 require('./index.css')
 
 const Dot = React.forwardRef(({ cx, cy, index, activeDot, dataKey, dotSettings, value, stroke }, ref) => {

package/modern/components/Legends/index.css

@@ -1,4 +1,4 @@
-/* hash: 1u8b7 */
+/* hash: oilmw */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,25 +15,25 @@
     --gap-2xl: 32px;
 } :root {
 } :root {
-} .chart__legendContent_1k7jj {
+} .chart__legendContent_14gcl {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-} .chart__legendWrap_1k7jj {
+} .chart__legendWrap_14gcl {
     width: 100%;
     margin: 0;
     padding: 0;
-} .chart__legendItem_1k7jj {
+} .chart__legendItem_14gcl {
     margin-right: var(--gap-2xl);
     cursor: pointer;
     display: inline-block;
-} .chart__legendItem_1k7jj:last-child {
+} .chart__legendItem_14gcl:last-child {
     margin-right: 0;
-} .chart__legendUnactive_1k7jj {
+} .chart__legendUnactive_14gcl {
     opacity: 0.3;
-} .chart__legendIcon_1k7jj {
+} .chart__legendIcon_14gcl {
     margin-right: 13px;
     display: flex;
-} .chart__legendValue_1k7jj {
+} .chart__legendValue_14gcl {
     text-transform: capitalize;
 }

package/modern/components/Legends/index.js

@@ -6,7 +6,7 @@ import { CircleLineIcon } from '../../icons/CircleLine.js';
 import { FilledCircleIcon } from '../../icons/FilledCircle.js';
 import { StrokeCircleIcon } from '../../icons/StrokeCircle.js';
 
-const styles = {"legendContent":"chart__legendContent_1k7jj","legendWrap":"chart__legendWrap_1k7jj","legendItem":"chart__legendItem_1k7jj","legendUnactive":"chart__legendUnactive_1k7jj","legendIcon":"chart__legendIcon_1k7jj","legendValue":"chart__legendValue_1k7jj"};
+const styles = {"legendContent":"chart__legendContent_14gcl","legendWrap":"chart__legendWrap_14gcl","legendItem":"chart__legendItem_14gcl","legendUnactive":"chart__legendUnactive_14gcl","legendIcon":"chart__legendIcon_14gcl","legendValue":"chart__legendValue_14gcl"};
 require('./index.css')
 
 const icons = {

package/modern/components/Tick/index.css

@@ -1,4 +1,4 @@
-/* hash: 1jlls */
+/* hash: 11fth */
 :root {
 } /* deprecated */ :root {
     --color-dark-bg-primary: #121212;
@@ -16,15 +16,15 @@
 } :root {
 } :root {
 } :root {
-} .chart__tickText_iubtt {
+} .chart__tickText_1l4ba {
     fill: var(--color-light-text-primary);
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
-} .chart__circle_iubtt {
+} .chart__circle_1l4ba {
     opacity: 0.3;
     fill: var(--color-dark-bg-primary);
-} .chart__circle_iubtt {
+} .chart__circle_1l4ba {
     opacity: 0.3;
     fill: var(--color-dark-bg-primary);
 }

package/modern/components/Tick/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import React from 'react';
 import { TickProps } from "../../types/utils/tick.types";
-declare const Tick: ({ y, payload, tickFormatter, xAxis }: TickProps) => JSX.Element;
+declare const Tick: ({ y, payload, tickFormatter, xAxis }: TickProps) => React.JSX.Element;
 export { Tick };

package/modern/components/Tick/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 
-const styles = {"tickText":"chart__tickText_iubtt","circle":"chart__circle_iubtt"};
+const styles = {"tickText":"chart__tickText_1l4ba","circle":"chart__circle_1l4ba"};
 require('./index.css')
 
 const Tick = ({ y, payload, tickFormatter, xAxis }) => {

package/modern/components/TooltipContent/index.css

@@ -1,4 +1,4 @@
-/* hash: h74fn */
+/* hash: v7u75 */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -21,7 +21,7 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .chart__tooltip_19942 {
+} .chart__tooltip_1siiu {
     background-color: var(--color-light-bg-primary);
     border: 1px solid var(--color-light-border-primary);
     box-shadow: var(--shadow-l);
@@ -29,15 +29,15 @@
     padding: var(--gap-s) var(--gap-m);
     pointer-events: none;
     position: relative;
-} .chart__tooltipList_19942 {
+} .chart__tooltipList_1siiu {
     position: relative;
     z-index: 5;
     list-style-type: none;
     padding: 0;
     margin: 0;
-} .chart__tooltipItem_19942 {
+} .chart__tooltipItem_1siiu {
     margin-bottom: 10px;
-} .chart__tooltipArrow_19942 {
+} .chart__tooltipArrow_1siiu {
     position: absolute;
     left: 0;
     top: 50%;
@@ -46,7 +46,7 @@
     height: 10px;
     border: 1px solid var(--color-light-border-primary);
     background-color: var(--color-light-bg-primary);
-} .chart__tooltipArrow_19942:before {
+} .chart__tooltipArrow_1siiu:before {
     content: '';
     position: absolute;
     left: -2px;
@@ -56,7 +56,7 @@
     border-style: solid;
     border-width: 0 24px 24px 0;
     border-color: transparent var(--color-light-bg-primary) transparent transparent;
-} .chart__tooltipArrowRight_19942 {
+} .chart__tooltipArrowRight_1siiu {
     left: 100%;
     transform: translate(-50%, -50%) scale(-1, 1) rotate(45deg);
 }

package/modern/components/TooltipContent/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import React from 'react';
 import { PayloadProps } from "../../types/payload.types";
 import { SeriaProps } from "../../types/seria.types";
 import { TooltipProps } from "../../types/tooltip.types";
@@ -6,5 +7,5 @@ interface TooltipContentProps extends TooltipProps {
     payload: PayloadProps[];
     series: SeriaProps[];
 }
-declare const TooltipContent: ({ payload, separator, label, tooltipArrowSide, arrow, series, labelFormatter, labelStyle, }: TooltipContentProps) => JSX.Element | null;
+declare const TooltipContent: ({ payload, separator, label, tooltipArrowSide, arrow, series, labelFormatter, labelStyle, }: TooltipContentProps) => React.JSX.Element | null;
 export { TooltipContentProps, TooltipContent };

package/modern/components/TooltipContent/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Typography } from '@alfalab/core-components-typography/modern';
 
-const styles = {"tooltip":"chart__tooltip_19942","tooltipList":"chart__tooltipList_19942","tooltipItem":"chart__tooltipItem_19942","tooltipArrow":"chart__tooltipArrow_19942","tooltipArrowRight":"chart__tooltipArrowRight_19942"};
+const styles = {"tooltip":"chart__tooltip_1siiu","tooltipList":"chart__tooltipList_1siiu","tooltipItem":"chart__tooltipItem_1siiu","tooltipArrow":"chart__tooltipArrow_1siiu","tooltipArrowRight":"chart__tooltipArrowRight_1siiu"};
 require('./index.css')
 
 const TooltipContent = ({ payload, separator, label, tooltipArrowSide, arrow, series, labelFormatter, labelStyle, }) => {

package/modern/icons/Circle.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+import React from 'react';
 type Props = {
     fill?: string;
     height?: number;
 };
-declare const CircleIcon: ({ fill, height }: Props) => JSX.Element;
+declare const CircleIcon: ({ fill, height }: Props) => React.JSX.Element;
 export { CircleIcon };

package/modern/icons/FilledCircle.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+import React from 'react';
 type Props = {
     fill?: string;
     height?: number;
 };
-declare const FilledCircleIcon: ({ fill, height }: Props) => JSX.Element;
+declare const FilledCircleIcon: ({ fill, height }: Props) => React.JSX.Element;
 export { FilledCircleIcon };

package/modern/icons/Point.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+import React from 'react';
 type Props = {
     fill?: string;
     height?: number;
 };
-declare const PointIcon: ({ fill, height }: Props) => JSX.Element;
+declare const PointIcon: ({ fill, height }: Props) => React.JSX.Element;
 export { PointIcon };

package/modern/icons/StrokeCircle.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+import React from 'react';
 type Props = {
     fill?: string;
     height?: number;
 };
-declare const StrokeCircleIcon: ({ fill, height }: Props) => JSX.Element;
+declare const StrokeCircleIcon: ({ fill, height }: Props) => React.JSX.Element;
 export { StrokeCircleIcon };

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: jlxo0 */
+/* hash: 402lo */
 :root {
 } /* deprecated */ :root {
     --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -15,14 +15,14 @@
 } :root {
 } :root {
 } :root {
-} .chart__coreChart_d77qc .recharts-line path {
+} .chart__coreChart_bgqh .recharts-line path {
         transition: d 0.2s ease-out;
-    } .chart__coreChart_d77qc .recharts-text tspan {
+    } .chart__coreChart_bgqh .recharts-text tspan {
         fill: var(--color-light-text-primary);
         font-size: 16px;
         line-height: 22px;
-    } .chart__bar_d77qc {
+    } .chart__bar_bgqh {
     transition: opacity 0.2s ease-out, d 0.2s ease-out;
-} .chart__unfocused_d77qc {
+} .chart__unfocused_bgqh {
     opacity: 0.3;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-chart",
-    "version": "3.1.12",
+    "version": "3.2.0",
     "description": "Chart component",
     "keywords": [],
     "license": "MIT",
@@ -11,7 +11,7 @@
         "directory": "dist"
     },
     "dependencies": {
-        "@alfalab/core-components-typography": "^3.2.2",
+        "@alfalab/core-components-typography": "^4.0.0",
         "classnames": "^2.3.1",
         "recharts": "^2.1.2",
         "tslib": "^2.4.0"