feat(Components): added theme

src/Area/Area.tsx

@@ -4,6 +4,7 @@ import { Area as G2plotArea, AreaOptions as G2plotAreaProps } from '@antv/g2plot
 import { useForkRef } from '@consta/uikit/useForkRef'
 
 import { useChart } from '@/__private__/hooks/useChart'
+import { useChartTheme } from '@/__private__/hooks/useChartTheme'
 import { getChart } from '@/__private__/utils/getChart'
 import { ChartProps } from '@/__private__/utils/types/ChartProps'
 
@@ -20,7 +21,8 @@ export const Area: Area = React.forwardRef((props, ref) => {
     className,
     ...rest
   } = props
-  const { chart, container } = useChart(G2plotArea, rest)
+  const theme = useChartTheme()
+  const { chart, container } = useChart(G2plotArea, { ...rest, theme })
 
   useEffect(() => {
     getChart(chartRef, chart.current)

src/Area/__stories__/Column.stories.tsx

@@ -21,6 +21,7 @@ const Default = () => {
         width: 800,
         height: '100%',
       }}
+      renderer="svg"
       {...options}
     />
   )

src/Bar/Bar.tsx

@@ -4,6 +4,7 @@ import { Bar as G2plotBar, BarOptions as G2plotBarProps } from '@antv/g2plot'
 import { useForkRef } from '@consta/uikit/useForkRef'
 
 import { useChart } from '@/__private__/hooks/useChart'
+import { useChartTheme } from '@/__private__/hooks/useChartTheme'
 import { getChart } from '@/__private__/utils/getChart'
 import { ChartProps } from '@/__private__/utils/types/ChartProps'
 
@@ -20,7 +21,8 @@ export const Bar: Bar = React.forwardRef((props, ref) => {
     className,
     ...rest
   } = props
-  const { chart, container } = useChart(G2plotBar, rest)
+  const theme = useChartTheme()
+  const { chart, container } = useChart(G2plotBar, { ...rest, theme })
 
   useEffect(() => {
     getChart(chartRef, chart.current)

src/Bar/__stories__/Bar.stories.tsx

@@ -21,6 +21,7 @@ const Default = () => {
         width: 800,
         height: '100%',
       }}
+      renderer="svg"
       {...options}
     />
   )

src/Bullet/Bullet.tsx

@@ -4,6 +4,7 @@ import { Bullet as G2plotBullet, BulletOptions as G2plotBulletProps } from '@ant
 import { useForkRef } from '@consta/uikit/useForkRef'
 
 import { useChart } from '@/__private__/hooks/useChart'
+import { useChartTheme } from '@/__private__/hooks/useChartTheme'
 import { getChart } from '@/__private__/utils/getChart'
 import { ChartProps } from '@/__private__/utils/types/ChartProps'
 
@@ -21,7 +22,8 @@ export const Bullet: Bullet = React.forwardRef((props, ref) => {
     ...rest
   } = props
 
-  const { chart, container } = useChart(G2plotBullet, rest)
+  const theme = useChartTheme()
+  const { chart, container } = useChart(G2plotBullet, { ...rest, theme })
 
   useEffect(() => {
     getChart(chartRef, chart.current)

src/Bullet/__stories__/Bullet.stories.tsx

@@ -21,6 +21,7 @@ const Default = () => {
         width: 800,
         height: '100%',
       }}
+      renderer="svg"
       {...options}
     />
   )

src/Column/Column.tsx

@@ -4,6 +4,7 @@ import { Column as G2plotColumn, ColumnOptions as G2plotColumnProps } from '@ant
 import { useForkRef } from '@consta/uikit/useForkRef'
 
 import { useChart } from '@/__private__/hooks/useChart'
+import { useChartTheme } from '@/__private__/hooks/useChartTheme'
 import { getChart } from '@/__private__/utils/getChart'
 import { ChartProps } from '@/__private__/utils/types/ChartProps'
 
@@ -20,7 +21,8 @@ export const Column: Column = React.forwardRef((props, ref) => {
     className,
     ...rest
   } = props
-  const { chart, container } = useChart(G2plotColumn, rest)
+  const theme = useChartTheme()
+  const { chart, container } = useChart(G2plotColumn, { ...rest, theme })
 
   useEffect(() => {
     getChart(chartRef, chart.current)

src/Column/__stories__/Column.stories.tsx

@@ -20,6 +20,7 @@ const Default = () => {
         width: 800,
         height: '100%',
       }}
+      renderer="svg"
       {...options}
     />
   )

src/Gauge/Gauge.tsx

@@ -4,6 +4,7 @@ import { Gauge as G2plotGauge, GaugeOptions as G2plotGaugeProps } from '@antv/g2
 import { useForkRef } from '@consta/uikit/useForkRef'
 
 import { useChart } from '@/__private__/hooks/useChart'
+import { useChartTheme } from '@/__private__/hooks/useChartTheme'
 import { getChart } from '@/__private__/utils/getChart'
 import { ChartProps } from '@/__private__/utils/types/ChartProps'
 
@@ -21,7 +22,8 @@ export const Gauge: Gauge = React.forwardRef((props, ref) => {
     ...rest
   } = props
 
-  const { chart, container } = useChart(G2plotGauge, rest)
+  const theme = useChartTheme()
+  const { chart, container } = useChart(G2plotGauge, { ...rest, theme })
 
   useEffect(() => {
     getChart(chartRef, chart.current)

src/Gauge/__stories__/Gauge.stories.tsx

@@ -9,8 +9,8 @@ const Default = () => {
   const options: GaugeProps = {
     percent: 0.7,
     range: {
-      ticks: [0, 1 / 3, 2 / 3, 1],
-      color: ['#F4664A', '#FAAD14', '#30BF78'],
+      // ticks: [0, 1 / 3, 2 / 3, 1],
+      // color: ['#F4664A', '#FAAD14', '#30BF78'],
     },
     indicator: {
       pointer: {
@@ -40,6 +40,7 @@ const Default = () => {
         width: 300,
         height: '100%',
       }}
+      renderer="svg"
       {...options}
     />
   )

src/Histogram/Histogram.tsx

@@ -7,6 +7,7 @@ import {
 import { useForkRef } from '@consta/uikit/useForkRef'
 
 import { useChart } from '@/__private__/hooks/useChart'
+import { useChartTheme } from '@/__private__/hooks/useChartTheme'
 import { getChart } from '@/__private__/utils/getChart'
 import { ChartProps } from '@/__private__/utils/types/ChartProps'
 
@@ -23,7 +24,8 @@ export const Histogram: Histogram = React.forwardRef((props, ref) => {
     className,
     ...rest
   } = props
-  const { chart, container } = useChart(G2plotHistogram, rest)
+  const theme = useChartTheme()
+  const { chart, container } = useChart(G2plotHistogram, { ...rest, theme })
 
   useEffect(() => {
     getChart(chartRef, chart.current)

src/Histogram/__stories__/Histogram.stories.tsx

@@ -18,6 +18,7 @@ const Default = () => {
         width: 800,
         height: '100%',
       }}
+      renderer="svg"
       {...options}
     />
   )

src/Line/Line.tsx

@@ -1,17 +1,19 @@
 import React, { useEffect, useImperativeHandle } from 'react'
 
-import { Line as G2plotLine, LineOptions as G2plotLineProps } from '@antv/g2plot'
+import { Line as G2plotLine } from '@antv/g2plot'
 import { useForkRef } from '@consta/uikit/useForkRef'
+import { useThemeVars } from '@consta/uikit/useThemeVars'
 
 import { useChart } from '@/__private__/hooks/useChart'
+import { getChartTheme } from '@/__private__/hooks/useChartTheme'
 import { getChart } from '@/__private__/utils/getChart'
-import { ChartProps } from '@/__private__/utils/types/ChartProps'
 
-export type LineProps = ChartProps<G2plotLineProps>
+import { withDefaultProps } from './helpers'
+import { Line as Component } from './types'
 
-type Line = (props: LineProps) => React.ReactElement | null
+export * from './types'
 
-export const Line: Line = React.forwardRef((props, ref) => {
+export const Line: Component = React.forwardRef((props, ref) => {
   const {
     chartRef,
     style = {
@@ -20,7 +22,11 @@ export const Line: Line = React.forwardRef((props, ref) => {
     className,
     ...rest
   } = props
-  const { chart, container } = useChart(G2plotLine, rest)
+  const themeVars = useThemeVars()
+  const theme = getChartTheme(themeVars)
+  const chartProps = withDefaultProps(rest)
+
+  const { chart, container } = useChart(G2plotLine, { ...chartProps, theme })
 
   useEffect(() => {
     getChart(chartRef, chart.current)