@semcore/mini-chart 17.0.0-prerelease.29 → 17.0.0-prerelease.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -2,12 +2,16 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
- ## [17.0.0] - 2026-02-27
5
+ ## [17.0.0] - 2026-03-09
6
6
 
7
7
  ### BREAK
8
8
 
9
9
  - **ellipsis**: New major version.
10
10
 
11
+ ### Fixed
12
+
13
+ - TrendBar and TrendHistogram `displayName`
14
+
11
15
  ## [16.1.1] - 2025-10-29
12
16
 
13
17
  ### Changed
@@ -110,5 +110,5 @@ const TrendHistogram = exports.TrendHistogram = (0, _core.createComponent)(Trend
110
110
  };
111
111
  }]
112
112
  });
113
- TrendBar.displayName = 'MiniChart.TrendHistogram';
113
+ TrendHistogram.displayName = 'MiniChart.TrendHistogram';
114
114
  //# sourceMappingURL=Bar.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Bar.js","names":["_core","require","_baseComponents","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_react","_Trend","style","sstyled","insert","TrendBarRoot","Trend","defaultData","value","data","loading","asProps","render","_ref","_ref2","STrendBar","Box","styles","resolveColor","isHistogram","animate","step","defaultWidth","length","__excludeProps","extractedAriaProps","extractAriaProps","default","createElement","cn","assignProps","containerRef","svgWidth","svgHeight","map","barItem","index","color","key","x","y","defaultHeight","width","height","fill","attributeName","values","dur","_defineProperty2","resolveColorEnhance","TrendBar","exports","createComponent","displayName","TrendHistogram","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Bar.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport { Trend, type CommonTrendProps } from './Trend';\nimport style from '../skeleton/skeleton.shadow.css';\n\ntype BarItem = {\n /**\n * Value\n */\n value: number;\n /**\n * Color of value\n */\n color?: string;\n};\n\nexport type TrendBarProps = CommonTrendProps & {\n /**\n * Data to bar chart\n */\n data: BarItem[];\n};\n\nclass TrendBarRoot extends Trend<TrendBarProps, typeof TrendBarRoot.enhance> {\n static enhance = [resolveColorEnhance()] as const;\n\n static style = style;\n\n static defaultProps = {\n animate: true,\n };\n\n get defaultData(): BarItem[] {\n return [{ value: 20 }, { value: 80 }, { value: 45 }, { value: 10 }];\n }\n\n get data(): BarItem[] {\n const { data, loading } = this.asProps;\n\n if (loading) {\n return this.defaultData;\n }\n\n return data;\n }\n\n render() {\n const STrendBar = Root;\n const { styles, resolveColor, isHistogram, animate, loading } = this.asProps;\n const step = this.defaultWidth / this.data.length;\n const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n return sstyled(styles)(\n <STrendBar render={Box} ref={this.containerRef} __excludeProps={['data', ...__excludeProps]}>\n <svg\n width='100%'\n height='100%'\n viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}\n role='img'\n {...extractedAriaProps}\n >\n {this.data.map((barItem, index) => {\n let color = resolveColor('chart-palette-order-other-data');\n\n if (barItem.color) {\n color = resolveColor(barItem.color);\n }\n\n return (\n <rect\n key={index}\n x={step * index}\n y={this.defaultHeight - barItem.value}\n width={isHistogram ? step : step * 0.8}\n height={barItem.value}\n fill={color}\n >\n {animate && !loading && (\n <animate\n attributeName='y'\n values={`${this.defaultHeight};${this.defaultHeight - barItem.value}`}\n dur='500ms'\n />\n )}\n </rect>\n );\n })}\n </svg>\n </STrendBar>,\n );\n }\n}\n\nexport const TrendBar = createComponent<'svg', TrendBarProps, {}, typeof TrendBarRoot.enhance>(TrendBarRoot);\n\nTrendBar.displayName = 'MiniChart.TrendBar';\n\nexport const TrendHistogram = createComponent<'svg', TrendBarProps, {}, typeof TrendBarRoot.enhance>(\n TrendBarRoot,\n {},\n {\n enhancements: [\n () => {\n return {\n wrapperProps: (props: TrendBarProps) => {\n return assignProps(props, { isHistogram: true });\n },\n };\n },\n ],\n },\n);\n\nTrendBar.displayName = 'MiniChart.TrendHistogram';\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Bar.js","names":["_core","require","_baseComponents","_ariaProps","_resolveColorEnhance","_interopRequireDefault","_react","_Trend","style","sstyled","insert","TrendBarRoot","Trend","defaultData","value","data","loading","asProps","render","_ref","_ref2","STrendBar","Box","styles","resolveColor","isHistogram","animate","step","defaultWidth","length","__excludeProps","extractedAriaProps","extractAriaProps","default","createElement","cn","assignProps","containerRef","svgWidth","svgHeight","map","barItem","index","color","key","x","y","defaultHeight","width","height","fill","attributeName","values","dur","_defineProperty2","resolveColorEnhance","TrendBar","exports","createComponent","displayName","TrendHistogram","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Bar.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport { Trend, type CommonTrendProps } from './Trend';\nimport style from '../skeleton/skeleton.shadow.css';\n\ntype BarItem = {\n /**\n * Value\n */\n value: number;\n /**\n * Color of value\n */\n color?: string;\n};\n\nexport type TrendBarProps = CommonTrendProps & {\n /**\n * Data to bar chart\n */\n data: BarItem[];\n};\n\nclass TrendBarRoot extends Trend<TrendBarProps, typeof TrendBarRoot.enhance> {\n static enhance = [resolveColorEnhance()] as const;\n\n static style = style;\n\n static defaultProps = {\n animate: true,\n };\n\n get defaultData(): BarItem[] {\n return [{ value: 20 }, { value: 80 }, { value: 45 }, { value: 10 }];\n }\n\n get data(): BarItem[] {\n const { data, loading } = this.asProps;\n\n if (loading) {\n return this.defaultData;\n }\n\n return data;\n }\n\n render() {\n const STrendBar = Root;\n const { styles, resolveColor, isHistogram, animate, loading } = this.asProps;\n const step = this.defaultWidth / this.data.length;\n const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n return sstyled(styles)(\n <STrendBar render={Box} ref={this.containerRef} __excludeProps={['data', ...__excludeProps]}>\n <svg\n width='100%'\n height='100%'\n viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}\n role='img'\n {...extractedAriaProps}\n >\n {this.data.map((barItem, index) => {\n let color = resolveColor('chart-palette-order-other-data');\n\n if (barItem.color) {\n color = resolveColor(barItem.color);\n }\n\n return (\n <rect\n key={index}\n x={step * index}\n y={this.defaultHeight - barItem.value}\n width={isHistogram ? step : step * 0.8}\n height={barItem.value}\n fill={color}\n >\n {animate && !loading && (\n <animate\n attributeName='y'\n values={`${this.defaultHeight};${this.defaultHeight - barItem.value}`}\n dur='500ms'\n />\n )}\n </rect>\n );\n })}\n </svg>\n </STrendBar>,\n );\n }\n}\n\nexport const TrendBar = createComponent<'svg', TrendBarProps, {}, typeof TrendBarRoot.enhance>(TrendBarRoot);\n\nTrendBar.displayName = 'MiniChart.TrendBar';\n\nexport const TrendHistogram = createComponent<'svg', TrendBarProps, {}, typeof TrendBarRoot.enhance>(\n TrendBarRoot,\n {},\n {\n enhancements: [\n () => {\n return {\n wrapperProps: (props: TrendBarProps) => {\n return assignProps(props, { isHistogram: true });\n },\n };\n },\n ],\n },\n);\n\nTrendHistogram.displayName = 'MiniChart.TrendHistogram';\n"],"mappings":"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","ignoreList":[]}
@@ -105,5 +105,5 @@ export const TrendHistogram = createComponent(TrendBarRoot, {}, {
105
105
  };
106
106
  }]
107
107
  });
108
- TrendBar.displayName = 'MiniChart.TrendHistogram';
108
+ TrendHistogram.displayName = 'MiniChart.TrendHistogram';
109
109
  //# sourceMappingURL=Bar.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Bar.js","names":["Box","createComponent","assignProps","Root","sstyled","extractAriaProps","resolveColorEnhance","React","Trend","style","_sstyled","insert","TrendBarRoot","defaultData","value","data","loading","asProps","render","_ref","_ref2","STrendBar","styles","resolveColor","isHistogram","animate","step","defaultWidth","length","__excludeProps","extractedAriaProps","createElement","cn","_assignProps","containerRef","svgWidth","svgHeight","map","barItem","index","color","key","x","y","defaultHeight","width","height","fill","attributeName","values","dur","_defineProperty","TrendBar","displayName","TrendHistogram","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Bar.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport { Trend, type CommonTrendProps } from './Trend';\nimport style from '../skeleton/skeleton.shadow.css';\n\ntype BarItem = {\n /**\n * Value\n */\n value: number;\n /**\n * Color of value\n */\n color?: string;\n};\n\nexport type TrendBarProps = CommonTrendProps & {\n /**\n * Data to bar chart\n */\n data: BarItem[];\n};\n\nclass TrendBarRoot extends Trend<TrendBarProps, typeof TrendBarRoot.enhance> {\n static enhance = [resolveColorEnhance()] as const;\n\n static style = style;\n\n static defaultProps = {\n animate: true,\n };\n\n get defaultData(): BarItem[] {\n return [{ value: 20 }, { value: 80 }, { value: 45 }, { value: 10 }];\n }\n\n get data(): BarItem[] {\n const { data, loading } = this.asProps;\n\n if (loading) {\n return this.defaultData;\n }\n\n return data;\n }\n\n render() {\n const STrendBar = Root;\n const { styles, resolveColor, isHistogram, animate, loading } = this.asProps;\n const step = this.defaultWidth / this.data.length;\n const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n return sstyled(styles)(\n <STrendBar render={Box} ref={this.containerRef} __excludeProps={['data', ...__excludeProps]}>\n <svg\n width='100%'\n height='100%'\n viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}\n role='img'\n {...extractedAriaProps}\n >\n {this.data.map((barItem, index) => {\n let color = resolveColor('chart-palette-order-other-data');\n\n if (barItem.color) {\n color = resolveColor(barItem.color);\n }\n\n return (\n <rect\n key={index}\n x={step * index}\n y={this.defaultHeight - barItem.value}\n width={isHistogram ? step : step * 0.8}\n height={barItem.value}\n fill={color}\n >\n {animate && !loading && (\n <animate\n attributeName='y'\n values={`${this.defaultHeight};${this.defaultHeight - barItem.value}`}\n dur='500ms'\n />\n )}\n </rect>\n );\n })}\n </svg>\n </STrendBar>,\n );\n }\n}\n\nexport const TrendBar = createComponent<'svg', TrendBarProps, {}, typeof TrendBarRoot.enhance>(TrendBarRoot);\n\nTrendBar.displayName = 'MiniChart.TrendBar';\n\nexport const TrendHistogram = createComponent<'svg', TrendBarProps, {}, typeof TrendBarRoot.enhance>(\n TrendBarRoot,\n {},\n {\n enhancements: [\n () => {\n return {\n wrapperProps: (props: TrendBarProps) => {\n return assignProps(props, { isHistogram: true });\n },\n };\n },\n ],\n },\n);\n\nTrendBar.displayName = 'MiniChart.TrendHistogram';\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Bar.js","names":["Box","createComponent","assignProps","Root","sstyled","extractAriaProps","resolveColorEnhance","React","Trend","style","_sstyled","insert","TrendBarRoot","defaultData","value","data","loading","asProps","render","_ref","_ref2","STrendBar","styles","resolveColor","isHistogram","animate","step","defaultWidth","length","__excludeProps","extractedAriaProps","createElement","cn","_assignProps","containerRef","svgWidth","svgHeight","map","barItem","index","color","key","x","y","defaultHeight","width","height","fill","attributeName","values","dur","_defineProperty","TrendBar","displayName","TrendHistogram","enhancements","wrapperProps","props"],"sources":["../../../../src/component/trend/Bar.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, assignProps, Root, sstyled } from '@semcore/core';\nimport { extractAriaProps } from '@semcore/core/lib/utils/ariaProps';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport { Trend, type CommonTrendProps } from './Trend';\nimport style from '../skeleton/skeleton.shadow.css';\n\ntype BarItem = {\n /**\n * Value\n */\n value: number;\n /**\n * Color of value\n */\n color?: string;\n};\n\nexport type TrendBarProps = CommonTrendProps & {\n /**\n * Data to bar chart\n */\n data: BarItem[];\n};\n\nclass TrendBarRoot extends Trend<TrendBarProps, typeof TrendBarRoot.enhance> {\n static enhance = [resolveColorEnhance()] as const;\n\n static style = style;\n\n static defaultProps = {\n animate: true,\n };\n\n get defaultData(): BarItem[] {\n return [{ value: 20 }, { value: 80 }, { value: 45 }, { value: 10 }];\n }\n\n get data(): BarItem[] {\n const { data, loading } = this.asProps;\n\n if (loading) {\n return this.defaultData;\n }\n\n return data;\n }\n\n render() {\n const STrendBar = Root;\n const { styles, resolveColor, isHistogram, animate, loading } = this.asProps;\n const step = this.defaultWidth / this.data.length;\n const { __excludeProps, extractedAriaProps } = extractAriaProps(this.asProps);\n\n return sstyled(styles)(\n <STrendBar render={Box} ref={this.containerRef} __excludeProps={['data', ...__excludeProps]}>\n <svg\n width='100%'\n height='100%'\n viewBox={`0 0 ${this.svgWidth} ${this.svgHeight}`}\n role='img'\n {...extractedAriaProps}\n >\n {this.data.map((barItem, index) => {\n let color = resolveColor('chart-palette-order-other-data');\n\n if (barItem.color) {\n color = resolveColor(barItem.color);\n }\n\n return (\n <rect\n key={index}\n x={step * index}\n y={this.defaultHeight - barItem.value}\n width={isHistogram ? step : step * 0.8}\n height={barItem.value}\n fill={color}\n >\n {animate && !loading && (\n <animate\n attributeName='y'\n values={`${this.defaultHeight};${this.defaultHeight - barItem.value}`}\n dur='500ms'\n />\n )}\n </rect>\n );\n })}\n </svg>\n </STrendBar>,\n );\n }\n}\n\nexport const TrendBar = createComponent<'svg', TrendBarProps, {}, typeof TrendBarRoot.enhance>(TrendBarRoot);\n\nTrendBar.displayName = 'MiniChart.TrendBar';\n\nexport const TrendHistogram = createComponent<'svg', TrendBarProps, {}, typeof TrendBarRoot.enhance>(\n TrendBarRoot,\n {},\n {\n enhancements: [\n () => {\n return {\n wrapperProps: (props: TrendBarProps) => {\n return assignProps(props, { isHistogram: true });\n },\n };\n },\n ],\n },\n);\n\nTrendHistogram.displayName = 'MiniChart.TrendHistogram';\n"],"mappings":"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","ignoreList":[]}
@@ -109,7 +109,7 @@ const TrendHistogram = createComponent(TrendBarRoot, {}, {
109
109
  };
110
110
  }]
111
111
  });
112
- TrendBar.displayName = "MiniChart.TrendHistogram";
112
+ TrendHistogram.displayName = "MiniChart.TrendHistogram";
113
113
  export {
114
114
  TrendBar,
115
115
  TrendHistogram
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/mini-chart",
3
3
  "description": "Semrush MiniChart Component",
4
- "version": "17.0.0-prerelease.29",
4
+ "version": "17.0.0-prerelease.30",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -22,9 +22,9 @@
22
22
  "directory": "semcore/mini-chart"
23
23
  },
24
24
  "devDependencies": {
25
- "@semcore/base-components": "17.0.0-prerelease.29",
26
- "@semcore/testing-utils": "1.0.0",
27
- "@semcore/core": "17.0.0-prerelease.29"
25
+ "@semcore/core": "17.0.0-prerelease.30",
26
+ "@semcore/base-components": "17.0.0-prerelease.30",
27
+ "@semcore/testing-utils": "1.0.0"
28
28
  },
29
29
  "scripts": {
30
30
  "build": "pnpm semcore-builder --source=ts && pnpm vite build"