From 3e2482fa463b2fe18d4c1a5c099a026e371b9997 Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Thu, 4 Jun 2026 14:51:36 +0200 Subject: [PATCH 1/2] [d3-chart] added responsiveness for charts by default --- .../src/component/Chart/AbstractChart.tsx | 80 +++++++++++++++++-- .../src/component/Chart/AbstractChart.type.ts | 4 + .../src/component/Chart/AreaChart.tsx | 6 +- .../src/style/abstract-chart.shadow.css | 7 ++ .../docs/examples/area-chart/basic-usage.tsx | 28 ++++--- 5 files changed, 109 insertions(+), 16 deletions(-) diff --git a/semcore/d3-chart/src/component/Chart/AbstractChart.tsx b/semcore/d3-chart/src/component/Chart/AbstractChart.tsx index 621bcbbe08..b80412304c 100644 --- a/semcore/d3-chart/src/component/Chart/AbstractChart.tsx +++ b/semcore/d3-chart/src/component/Chart/AbstractChart.tsx @@ -3,6 +3,9 @@ import type { Intergalactic } from '@semcore/core'; import { Component, Root, sstyled } from '@semcore/core'; import { extractAriaProps } from '@semcore/core/lib/utils/ariaProps'; import { callAllEventHandlers } from '@semcore/core/lib/utils/assignProps'; +import canUseDOM from '@semcore/core/lib/utils/canUseDOM'; +import cssToIntDefault from '@semcore/core/lib/utils/cssToIntDefault'; +import trottle from '@semcore/core/lib/utils/rafTrottle'; import { Text } from '@semcore/typography'; import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale'; import React, { Fragment } from 'react'; @@ -24,6 +27,9 @@ export type ChartState = { dataDefinitions: Array; highlightedLine: number; withTrend: boolean; + + plotWidth: number; + plotHeight: number; }; export const NOT_A_VALUE = 'n/a'; @@ -45,9 +51,20 @@ export abstract class AbstractChart< protected dataHints = makeDataHintsContainer(); + protected chartRef = React.createRef(); + protected legendRef = React.createRef(); + + private observer: ResizeObserver | undefined; + constructor(props: Props) { super(props); + this.handleResize = trottle(this.handleResize.bind(this)); + + if (canUseDOM()) { + this.observer = new ResizeObserver(this.handleResize); + } + this.setHighlightedLine = this.setHighlightedLine.bind(this); this.handleChangeVisible = this.handleChangeVisible.bind(this); this.handleMouseEnter = this.handleMouseEnter.bind(this); @@ -60,15 +77,25 @@ export abstract class AbstractChart< dataDefinitions: this.getDefaultDataDefinitions(), highlightedLine: -1, withTrend: false, + plotWidth: props.plotWidth, + plotHeight: props.plotHeight, } as State; } + public componentDidMount(): void { + this.observer?.observe(this.chartRef.current!); + } + public componentDidUpdate(prevProps: Props) { if (prevProps.data !== this.props.data || prevProps.legendProps !== this.props.legendProps) { this.setState({ dataDefinitions: this.getDefaultDataDefinitions() }); } } + public componentWillUnmount(): void { + this.observer?.disconnect(); + } + protected getDefaultDataDefinitions(): Array { const { data, legendProps } = this.props; @@ -398,7 +425,7 @@ export abstract class AbstractChart< }; if (lProps.legendType === 'Table') { - return ; + return ; } if ('withTrend' in lProps) { @@ -410,10 +437,10 @@ export abstract class AbstractChart< onTrendIsVisibleChange: this.handleWithTrendChange, }; - return ; + return ; } - return ; + return ; } protected renderAxis(): React.ReactNode { @@ -531,13 +558,14 @@ export abstract class AbstractChart< public render() { const SChart = Root; - const { styles, plotWidth, plotHeight, data, patterns, a11yAltTextConfig, duration, eventEmitter, showTooltip } = + const { styles, data, patterns, a11yAltTextConfig, duration, eventEmitter, showTooltip } = this.asProps; + const { plotWidth, plotHeight } = this.state; const { extractedAriaProps } = extractAriaProps(this.asProps); return sstyled(styles)( - + {this.renderLegend()} , ); } + + private handleResize(entities: ResizeObserverEntry[]) { + const { aspect, direction, onResize } = this.asProps; + const chartElement = this.chartRef.current; + + if (!chartElement) return; + + const legendElement = this.legendRef.current; + const computedStyles = window.getComputedStyle(chartElement); + + let width: number = chartElement.clientWidth; + let height: number = chartElement.clientHeight; + + if (legendElement) { + const gap: number = cssToIntDefault(computedStyles.gap, 0); + if (direction?.includes('column')) { + height = height - legendElement.clientHeight - gap; + } else { + width = width - legendElement.clientWidth - gap; + } + } + + if (aspect) { + const minHeight = cssToIntDefault(computedStyles.getPropertyValue('min-height')); + const maxHeight = cssToIntDefault(computedStyles.getPropertyValue('max-height')); + height = width * aspect; + + if (height < minHeight) { + height = minHeight; + } + if (height > maxHeight) { + height = maxHeight; + } + } + + this.setState({ + plotWidth: width, + plotHeight: height, + }); + + onResize?.([width, height], entities); + } } diff --git a/semcore/d3-chart/src/component/Chart/AbstractChart.type.ts b/semcore/d3-chart/src/component/Chart/AbstractChart.type.ts index 09db471e8a..d614248724 100644 --- a/semcore/d3-chart/src/component/Chart/AbstractChart.type.ts +++ b/semcore/d3-chart/src/component/Chart/AbstractChart.type.ts @@ -158,6 +158,10 @@ export type BaseChartProps = FlexProps & { * Flag to show/hide legend */ showLegend?: boolean; + /** Relation between height and width dimensions block */ + aspect?: number; + /** Callback which will be called after changing the block size */ + onResize?: (size: [number, number], entries: ResizeObserverEntry[]) => void; /** * Props for Legend */ diff --git a/semcore/d3-chart/src/component/Chart/AreaChart.tsx b/semcore/d3-chart/src/component/Chart/AreaChart.tsx index 3af1953517..c814627308 100644 --- a/semcore/d3-chart/src/component/Chart/AreaChart.tsx +++ b/semcore/d3-chart/src/component/Chart/AreaChart.tsx @@ -30,7 +30,8 @@ class AreaChartComponent extends AbstractChart< } as const; get xScale() { - const { xScale, marginY = 40, plotWidth, data, groupKey } = this.asProps; + const { xScale, marginY = 40, data, groupKey } = this.asProps; + const { plotWidth } = this.state; if (xScale) { return xScale; @@ -48,7 +49,8 @@ class AreaChartComponent extends AbstractChart< } get yScale(): ScaleLinear { - const { yScale, marginX = 24, plotHeight, stacked } = this.asProps; + const { yScale, marginX = 24, stacked } = this.asProps; + const { plotHeight } = this.state; if (yScale) { return yScale; diff --git a/semcore/d3-chart/src/style/abstract-chart.shadow.css b/semcore/d3-chart/src/style/abstract-chart.shadow.css index e5cbc2cfe0..124b8494cb 100644 --- a/semcore/d3-chart/src/style/abstract-chart.shadow.css +++ b/semcore/d3-chart/src/style/abstract-chart.shadow.css @@ -1,3 +1,10 @@ +SChart { + width: 100%; + height: 100%; + min-width: 0; + min-height: 0; +} + STooltipChildrenWrapper { display: grid; column-gap: var(--intergalactic-spacing-2x, 8px); diff --git a/stories/components/d3-chart/docs/examples/area-chart/basic-usage.tsx b/stories/components/d3-chart/docs/examples/area-chart/basic-usage.tsx index 8ca932ff25..2115bfe955 100644 --- a/stories/components/d3-chart/docs/examples/area-chart/basic-usage.tsx +++ b/stories/components/d3-chart/docs/examples/area-chart/basic-usage.tsx @@ -14,17 +14,27 @@ function formatDate(value: any) { const Demo = () => { return ( - +
+ +
); }; -const data = AreaMockData.Default; +const data = AreaMockData.Interpolation; export default Demo; From b942b61c7f9d357732addfd4ffbbf5aabe8b61f2 Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Fri, 5 Jun 2026 11:48:29 +0200 Subject: [PATCH 2/2] [d3-chart] init responsiveness --- .../src/components/flex-box/Box/useBox.tsx | 23 ++++++++------- .../src/component/Chart/AbstractChart.type.ts | 6 ++-- .../d3-chart/src/component/Chart/BarChart.tsx | 6 ++-- .../src/component/Chart/BubbleChart.tsx | 6 ++-- .../src/component/Chart/CigaretteChart.tsx | 17 ++++++----- .../Chart/CompactHorizontalBarChart.tsx | 6 ++-- .../src/component/Chart/HistogramChart.tsx | 6 ++-- .../src/component/Chart/LineChart.tsx | 6 ++-- .../src/component/Chart/ScatterPlotChart.tsx | 6 ++-- .../docs/examples/area-chart/basic-usage.tsx | 21 ++++++-------- .../docs/examples/bar-chart/basic-usage.tsx | 22 ++++++++++----- .../bar-horizontal-compact/basic_usage.tsx | 24 ++++++++++------ .../examples/bar-horizontal/basic-usage.tsx | 24 ++++++++++------ .../examples/bubble-chart/basic-usage.tsx | 14 +++++++++- .../examples/cigarette-chart/basic-usage.tsx | 12 +++++++- .../docs/examples/donut-chart/basic-usage.tsx | 14 ++++++++-- .../docs/examples/line-chart/basic-usage.tsx | 24 ++++++++++------ .../docs/examples/radar-chart/basic-usage.tsx | 24 ++++++++++------ .../scatterplot-chart/basic-usage.tsx | 22 ++++++++++----- .../stacked-area-chart/basic-usage.tsx | 28 ++++++++++++------- .../stacked-bar-chart/basic-usage.tsx | 24 ++++++++++------ .../docs/examples/venn-chart/basic-usage.tsx | 14 +++++++--- tools/builder/src/unplugin-semcore.ts | 1 - 23 files changed, 230 insertions(+), 120 deletions(-) diff --git a/semcore/base-components/src/components/flex-box/Box/useBox.tsx b/semcore/base-components/src/components/flex-box/Box/useBox.tsx index d11f25e909..cb720ab544 100644 --- a/semcore/base-components/src/components/flex-box/Box/useBox.tsx +++ b/semcore/base-components/src/components/flex-box/Box/useBox.tsx @@ -167,19 +167,16 @@ export type BoxProps = IStyledProps & { children?: React.ReactNode; /** Hover cursor */ hoverCursor?: Property.Cursor; - /** - * Background - */ + /** Css `background` property */ bg?: Property.Background | BasicColorKeys | SemanticColorKeys; - /** - * Border radius - */ + /** Css `border-radius` property */ borderRadius?: Property.BorderRadius | BorderRadius; - /** - * Border - */ + /** Css `border` property */ border?: Property.Border; - + /** Css `resize` property */ + resize?: Property.Resize; + /** Css `overflow` property */ + overflow?: Property.Overflow; /** * Old way to add custom style * @deprecated @@ -254,6 +251,8 @@ function calculateIndentStyles(props: BoxProps, scaleIndent: number, colorResolv getAutoOrScaleIndent(props['px'], scaleIndent), border: props.border, + resize: props.resize, + overflow: props.overflow, borderRadius: props.borderRadius ? colorResolver(props.borderRadius) : undefined, backgroundColor: props.bg ? colorResolver(props.bg) : undefined, }); @@ -277,7 +276,9 @@ export default function useBox( bg, border, borderRadius, + resize, flex, + overflow, w, h, wMin, @@ -351,6 +352,8 @@ export default function useBox( border, borderRadius, bg, + resize, + overflow, ]); const styles = sstyled(style); diff --git a/semcore/d3-chart/src/component/Chart/AbstractChart.type.ts b/semcore/d3-chart/src/component/Chart/AbstractChart.type.ts index d614248724..d5b330abc0 100644 --- a/semcore/d3-chart/src/component/Chart/AbstractChart.type.ts +++ b/semcore/d3-chart/src/component/Chart/AbstractChart.type.ts @@ -63,12 +63,14 @@ export type BaseChartProps = FlexProps & { data: T; /** * Width of plot + * @deprecated. width is 100% of the parent element. */ - plotWidth: number; + plotWidth?: number; /** * Height of plot + * @deprecated. height is 100% of the parent element. */ - plotHeight: number; + plotHeight?: number; /** Enables charts patterns that enhances charts accessibility */ patterns?: PatternsConfig; diff --git a/semcore/d3-chart/src/component/Chart/BarChart.tsx b/semcore/d3-chart/src/component/Chart/BarChart.tsx index 48315f9441..6a42c2f674 100644 --- a/semcore/d3-chart/src/component/Chart/BarChart.tsx +++ b/semcore/d3-chart/src/component/Chart/BarChart.tsx @@ -267,12 +267,11 @@ class BarChartComponent extends AbstractChart< const { marginY = 40, marginX = 24, - plotWidth, - plotHeight, invertAxis, data, groupKey, } = this.asProps; + const { plotWidth, plotHeight } = this.state; const testItem = data[0][groupKey]; const range = invertAxis @@ -291,7 +290,8 @@ class BarChartComponent extends AbstractChart< } private get valueScale() { - const { marginY = 40, marginX = 24, plotWidth, plotHeight, invertAxis, type } = this.asProps; + const { marginY = 40, marginX = 24, invertAxis, type } = this.asProps; + const { plotWidth, plotHeight } = this.state; const max = type === 'stack' ? super.maxStackedValue : Math.max(...super.flatValues); diff --git a/semcore/d3-chart/src/component/Chart/BubbleChart.tsx b/semcore/d3-chart/src/component/Chart/BubbleChart.tsx index 424fbd0545..b05aca4fba 100644 --- a/semcore/d3-chart/src/component/Chart/BubbleChart.tsx +++ b/semcore/d3-chart/src/component/Chart/BubbleChart.tsx @@ -72,7 +72,8 @@ class BubbleChartComponent extends AbstractChart< } get xScale() { - const { xScale, marginY = 30, plotWidth, data } = this.asProps; + const { xScale, marginY = 30, data } = this.asProps; + const { plotWidth } = this.state; if (xScale) { return xScale; @@ -85,7 +86,8 @@ class BubbleChartComponent extends AbstractChart< } get yScale(): ScaleLinear { - const { yScale, marginX = 30, plotHeight, data } = this.asProps; + const { yScale, marginX = 30, data } = this.asProps; + const { plotHeight } = this.state; if (yScale) { return yScale; diff --git a/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx b/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx index 114157646f..d7cfc4d067 100644 --- a/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx +++ b/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx @@ -147,7 +147,8 @@ class CigaretteChartComponent extends AbstractChart< } private computeCigaretteItems() { - const { plotWidth, plotHeight, data, invertAxis, minimalBarWidth } = this.asProps; + const { data, invertAxis, minimalBarWidth } = this.asProps; + const { plotWidth, plotHeight } = this.state; const dataDefinitions = invertAxis ? this.activeDataDefinitions @@ -214,20 +215,21 @@ class CigaretteChartComponent extends AbstractChart< }; get xScale() { - const { plotWidth } = this.asProps; + const { plotWidth } = this.state; return scaleLinear([0, plotWidth]); } get yScale() { - const { plotHeight } = this.asProps; + const { plotHeight } = this.state; return scaleLinear([plotHeight, 0]); } renderChart() { - const { invertAxis, data, uid, duration, patterns, plotHeight, plotWidth, onClick } = + const { invertAxis, data, uid, duration, patterns, onClick } = this.asProps; + const { plotWidth, plotHeight } = this.state; const { dataDefinitions, highlightedLine } = this.state; this.offset = 0; @@ -415,13 +417,14 @@ class CigaretteChartComponent extends AbstractChart< override render() { const SChart = Root; - const { styles, plotWidth, plotHeight, data, patterns, invertAxis, a11yAltTextConfig } = this.asProps; + const { styles, data, patterns, invertAxis, a11yAltTextConfig } = this.asProps; + const { plotWidth, plotHeight } = this.state; const header = this.renderHeader(); if (invertAxis) { return sstyled(styles)( - + {header} + acc + d, 0); diff --git a/semcore/d3-chart/src/component/Chart/HistogramChart.tsx b/semcore/d3-chart/src/component/Chart/HistogramChart.tsx index 335f6cf53f..023edc3425 100644 --- a/semcore/d3-chart/src/component/Chart/HistogramChart.tsx +++ b/semcore/d3-chart/src/component/Chart/HistogramChart.tsx @@ -34,12 +34,11 @@ class HistogramChartComponent extends AbstractChart< xScale, marginY = 30, marginX = 30, - plotWidth, - plotHeight, invertAxis, data, groupKey, } = this.asProps; + const { plotWidth, plotHeight } = this.state; if (xScale) { return xScale; @@ -66,11 +65,10 @@ class HistogramChartComponent extends AbstractChart< yScale, marginY = 30, marginX = 30, - plotHeight, - plotWidth, invertAxis, data, } = this.asProps; + const { plotWidth, plotHeight } = this.state; let max: number; diff --git a/semcore/d3-chart/src/component/Chart/LineChart.tsx b/semcore/d3-chart/src/component/Chart/LineChart.tsx index 9cb1153dc9..327a290afc 100644 --- a/semcore/d3-chart/src/component/Chart/LineChart.tsx +++ b/semcore/d3-chart/src/component/Chart/LineChart.tsx @@ -30,7 +30,8 @@ class LineChartComponent extends AbstractChart< } as const; protected get xScale() { - const { xScale, marginY = 30, plotWidth, data, groupKey } = this.asProps; + const { xScale, marginY = 30, data, groupKey } = this.asProps; + const { plotWidth } = this.state; if (xScale) { return xScale; @@ -48,7 +49,8 @@ class LineChartComponent extends AbstractChart< } protected get yScale(): ScaleLinear { - const { yScale, marginX = 30, plotHeight } = this.asProps; + const { yScale, marginX = 30 } = this.asProps; + const { plotHeight } = this.state; if (yScale) { return yScale; diff --git a/semcore/d3-chart/src/component/Chart/ScatterPlotChart.tsx b/semcore/d3-chart/src/component/Chart/ScatterPlotChart.tsx index ccabd3a7f7..3ac187c66d 100644 --- a/semcore/d3-chart/src/component/Chart/ScatterPlotChart.tsx +++ b/semcore/d3-chart/src/component/Chart/ScatterPlotChart.tsx @@ -42,7 +42,8 @@ class ScatterPlotChartComponent extends AbstractChart< } protected get xScale() { - const { xScale, marginY = 30, plotWidth, data, groupKey, valueKey } = this.asProps; + const { xScale, marginY = 30, data, groupKey, valueKey } = this.asProps; + const { plotWidth } = this.state; if (xScale) { return xScale; @@ -61,7 +62,8 @@ class ScatterPlotChartComponent extends AbstractChart< } protected get yScale(): ScaleLinear { - const { yScale, marginX = 30, plotHeight, valueKey } = this.asProps; + const { yScale, marginX = 30, valueKey } = this.asProps; + const { plotHeight } = this.state; if (yScale) { return yScale; diff --git a/stories/components/d3-chart/docs/examples/area-chart/basic-usage.tsx b/stories/components/d3-chart/docs/examples/area-chart/basic-usage.tsx index 2115bfe955..df82e2f8e6 100644 --- a/stories/components/d3-chart/docs/examples/area-chart/basic-usage.tsx +++ b/stories/components/d3-chart/docs/examples/area-chart/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -14,27 +15,23 @@ function formatDate(value: any) { const Demo = () => { return ( -
-
+ ); }; -const data = AreaMockData.Interpolation; +const data = AreaMockData.Default; export default Demo; diff --git a/stories/components/d3-chart/docs/examples/bar-chart/basic-usage.tsx b/stories/components/d3-chart/docs/examples/bar-chart/basic-usage.tsx index 4071fc8cf8..4048a07bb7 100644 --- a/stories/components/d3-chart/docs/examples/bar-chart/basic-usage.tsx +++ b/stories/components/d3-chart/docs/examples/bar-chart/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -5,13 +6,20 @@ import BarMockData from '../../../__mocks__/bar'; const Demo = () => { return ( - + + + ); }; diff --git a/stories/components/d3-chart/docs/examples/bar-horizontal-compact/basic_usage.tsx b/stories/components/d3-chart/docs/examples/bar-horizontal-compact/basic_usage.tsx index 7caa644dd8..cf3a29096d 100644 --- a/stories/components/d3-chart/docs/examples/bar-horizontal-compact/basic_usage.tsx +++ b/stories/components/d3-chart/docs/examples/bar-horizontal-compact/basic_usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -5,14 +6,21 @@ import BarMockData from '../../../__mocks__/bar'; const Demo = () => { return ( - + + + ); }; diff --git a/stories/components/d3-chart/docs/examples/bar-horizontal/basic-usage.tsx b/stories/components/d3-chart/docs/examples/bar-horizontal/basic-usage.tsx index c690228f85..367c3b3852 100644 --- a/stories/components/d3-chart/docs/examples/bar-horizontal/basic-usage.tsx +++ b/stories/components/d3-chart/docs/examples/bar-horizontal/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -5,14 +6,21 @@ import BarMockData from '../../../__mocks__/bar'; const Demo = () => { return ( - + + + ); }; diff --git a/stories/components/d3-chart/docs/examples/bubble-chart/basic-usage.tsx b/stories/components/d3-chart/docs/examples/bubble-chart/basic-usage.tsx index 79ae9a3a7d..0c2e5a3938 100644 --- a/stories/components/d3-chart/docs/examples/bubble-chart/basic-usage.tsx +++ b/stories/components/d3-chart/docs/examples/bubble-chart/basic-usage.tsx @@ -1,10 +1,22 @@ +import { Box } from '@semcore/ui/base-components'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; import BubbleMockData from '../../../__mocks__/bubble'; const Demo = () => { - return ; + return ( + + + + ); }; const data = BubbleMockData.Label; diff --git a/stories/components/d3-chart/docs/examples/cigarette-chart/basic-usage.tsx b/stories/components/d3-chart/docs/examples/cigarette-chart/basic-usage.tsx index f8c6722b9e..0993386472 100644 --- a/stories/components/d3-chart/docs/examples/cigarette-chart/basic-usage.tsx +++ b/stories/components/d3-chart/docs/examples/cigarette-chart/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -5,7 +6,16 @@ import CigaretteMockData from '../../../__mocks__/cigarette'; function Demo() { return ( - + + + ); } diff --git a/stories/components/d3-chart/docs/examples/donut-chart/basic-usage.tsx b/stories/components/d3-chart/docs/examples/donut-chart/basic-usage.tsx index 1738fb2880..b97a8d2c26 100644 --- a/stories/components/d3-chart/docs/examples/donut-chart/basic-usage.tsx +++ b/stories/components/d3-chart/docs/examples/donut-chart/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -5,9 +6,16 @@ import DonutMockData from '../../../__mocks__/donut'; const Demo = () => { return ( -
- -
+ + + ); }; diff --git a/stories/components/d3-chart/docs/examples/line-chart/basic-usage.tsx b/stories/components/d3-chart/docs/examples/line-chart/basic-usage.tsx index 05650ce66a..88e775a833 100644 --- a/stories/components/d3-chart/docs/examples/line-chart/basic-usage.tsx +++ b/stories/components/d3-chart/docs/examples/line-chart/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -5,14 +6,21 @@ import LineMockData from '../../../__mocks__/line'; const Demo = () => { return ( - + + + ); }; diff --git a/stories/components/d3-chart/docs/examples/radar-chart/basic-usage.tsx b/stories/components/d3-chart/docs/examples/radar-chart/basic-usage.tsx index 2959b9fdae..bbee89b1a0 100644 --- a/stories/components/d3-chart/docs/examples/radar-chart/basic-usage.tsx +++ b/stories/components/d3-chart/docs/examples/radar-chart/basic-usage.tsx @@ -1,17 +1,25 @@ -import { Chart, colors } from '@semcore/ui/d3-chart'; +import { Box } from '@semcore/ui/base-components'; +import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; import RadarMockData from '../../../__mocks__/radar'; const Demo = () => { return ( - + + + ); }; diff --git a/stories/components/d3-chart/docs/examples/scatterplot-chart/basic-usage.tsx b/stories/components/d3-chart/docs/examples/scatterplot-chart/basic-usage.tsx index 98a03db72c..2f7ed07426 100644 --- a/stories/components/d3-chart/docs/examples/scatterplot-chart/basic-usage.tsx +++ b/stories/components/d3-chart/docs/examples/scatterplot-chart/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -5,13 +6,20 @@ import ScatterplotMockData from '../../../__mocks__/scatterplot'; const Demo = () => { return ( - + + + ); }; diff --git a/stories/components/d3-chart/docs/examples/stacked-area-chart/basic-usage.tsx b/stories/components/d3-chart/docs/examples/stacked-area-chart/basic-usage.tsx index 63b3bfae80..ae63cdc65f 100644 --- a/stories/components/d3-chart/docs/examples/stacked-area-chart/basic-usage.tsx +++ b/stories/components/d3-chart/docs/examples/stacked-area-chart/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -21,16 +22,23 @@ const formatDate = (type: 'axis' | 'tooltip') => (value: any) => { const Demo = () => { return ( - + + + ); }; diff --git a/stories/components/d3-chart/docs/examples/stacked-bar-chart/basic-usage.tsx b/stories/components/d3-chart/docs/examples/stacked-bar-chart/basic-usage.tsx index e2246c66bc..9047b0e3cb 100644 --- a/stories/components/d3-chart/docs/examples/stacked-bar-chart/basic-usage.tsx +++ b/stories/components/d3-chart/docs/examples/stacked-bar-chart/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -5,14 +6,21 @@ import StackedBarMockData from '../../../__mocks__/stacked-bar'; const Demo = () => { return ( - + + + ); }; diff --git a/stories/components/d3-chart/docs/examples/venn-chart/basic-usage.tsx b/stories/components/d3-chart/docs/examples/venn-chart/basic-usage.tsx index d04764a140..c6b4472121 100644 --- a/stories/components/d3-chart/docs/examples/venn-chart/basic-usage.tsx +++ b/stories/components/d3-chart/docs/examples/venn-chart/basic-usage.tsx @@ -1,3 +1,4 @@ +import { Box } from '@semcore/ui/base-components'; import { Chart } from '@semcore/ui/d3-chart'; import React from 'react'; @@ -5,15 +6,20 @@ import VennMockData from '../../../__mocks__/venn'; const Demo = () => { return ( -
+ -
+ ); }; diff --git a/tools/builder/src/unplugin-semcore.ts b/tools/builder/src/unplugin-semcore.ts index 52152f1f81..0d274f3731 100644 --- a/tools/builder/src/unplugin-semcore.ts +++ b/tools/builder/src/unplugin-semcore.ts @@ -13,7 +13,6 @@ export const unpluginSemcoreResolve = createUnplugin<{ rootPath: string }>((opts return id.includes('/semcore/'); }, async load(id) { - console.log('load', id); const { code } = await loadSemcoreSources(id); return {