@fluentui/react-charts 0.0.0-nightly-20251118-0406.1 → 0.0.0-nightly-20251120-0407.1
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 +13 -13
- package/dist/index.d.ts +5 -1
- package/lib/components/CommonComponents/CartesianChart.js +2 -0
- package/lib/components/CommonComponents/CartesianChart.js.map +1 -1
- package/lib/components/CommonComponents/CartesianChart.types.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +21 -1
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/components/Sparkline/Sparkline.js +11 -7
- package/lib/components/Sparkline/Sparkline.js.map +1 -1
- package/lib/utilities/utilities.js +6 -2
- package/lib/utilities/utilities.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/CartesianChart.js +2 -0
- package/lib-commonjs/components/CommonComponents/CartesianChart.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/CartesianChart.types.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +21 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/components/Sparkline/Sparkline.js +11 -7
- package/lib-commonjs/components/Sparkline/Sparkline.js.map +1 -1
- package/lib-commonjs/utilities/utilities.js +6 -2
- package/lib-commonjs/utilities/utilities.js.map +1 -1
- package/package.json +12 -12
|
@@ -10,13 +10,13 @@ Object.defineProperty(exports, "Sparkline", {
|
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
|
-
const
|
|
14
|
-
const
|
|
13
|
+
const _reacttabster = require("@fluentui/react-tabster");
|
|
14
|
+
const _d3array = require("d3-array");
|
|
15
15
|
const _d3scale = require("d3-scale");
|
|
16
16
|
const _d3shape = require("d3-shape");
|
|
17
|
-
const
|
|
18
|
-
const _reacttabster = require("@fluentui/react-tabster");
|
|
17
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
19
18
|
const _index = require("../../utilities/index");
|
|
19
|
+
const _useSparklineStylesstyles = require("./useSparklineStyles.styles");
|
|
20
20
|
const Sparkline = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
21
21
|
let margin = {
|
|
22
22
|
top: 2,
|
|
@@ -29,9 +29,13 @@ const Sparkline = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
29
29
|
let _emptyChartId = '_SparklineChart_empty';
|
|
30
30
|
let _isRTL = (0, _index.useRtl)();
|
|
31
31
|
const [points, setPoints] = _react.useState([]);
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
const
|
|
32
|
+
var _props_width;
|
|
33
|
+
// Use props with default fallbacks instead of hardcoded values
|
|
34
|
+
const width = (_props_width = props.width) !== null && _props_width !== void 0 ? _props_width : 80;
|
|
35
|
+
var _props_height;
|
|
36
|
+
const height = (_props_height = props.height) !== null && _props_height !== void 0 ? _props_height : 20;
|
|
37
|
+
var _props_valueTextWidth;
|
|
38
|
+
const valueTextWidth = (_props_valueTextWidth = props.valueTextWidth) !== null && _props_valueTextWidth !== void 0 ? _props_valueTextWidth : 80;
|
|
35
39
|
const line = _react.useMemo(()=>{
|
|
36
40
|
return (0, _d3shape.line)().x((d)=>x(d.x)).y((d)=>y(d.y)).curve(_d3shape.curveLinear);
|
|
37
41
|
}, [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Sparkline/Sparkline.tsx"],"sourcesContent":["'use client';\n\nimport
|
|
1
|
+
{"version":3,"sources":["../src/components/Sparkline/Sparkline.tsx"],"sourcesContent":["'use client';\n\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { extent as d3Extent, max as d3Max } from 'd3-array';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';\nimport * as React from 'react';\nimport { SparklineProps } from '../../index';\nimport { LineChartDataPoint } from '../../types/DataPoint';\nimport { useRtl } from '../../utilities/index';\nimport { useSparklineStyles } from './useSparklineStyles.styles';\n\n/**\n * Sparkline is the context wrapper and container for all Sparkline content/controls,\n * It has no direct style or slot opinions.\n *\n * Sparkline also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const Sparkline: React.FunctionComponent<SparklineProps> = React.forwardRef<HTMLDivElement, SparklineProps>(\n (props, forwardedRef) => {\n let margin = {\n top: 2,\n right: 0,\n bottom: 0,\n left: 0,\n };\n let x: any;\n let y: any;\n let _emptyChartId: string = '_SparklineChart_empty';\n let _isRTL: boolean = useRtl();\n const [points, setPoints] = React.useState<LineChartDataPoint[]>([]);\n\n // Use props with default fallbacks instead of hardcoded values\n const width = props.width ?? 80;\n const height = props.height ?? 20;\n const valueTextWidth = props.valueTextWidth ?? 80;\n\n const line = React.useMemo(() => {\n return d3Line<LineChartDataPoint>()\n .x((d: LineChartDataPoint) => x(d.x))\n .y((d: LineChartDataPoint) => y(d.y))\n .curve(d3curveLinear);\n }, [x, y]);\n\n const area = React.useMemo(() => {\n return d3Area<LineChartDataPoint>()\n .x((d: LineChartDataPoint) => x(d.x))\n .y0(height)\n .y1((d: LineChartDataPoint) => y(d.y))\n .curve(d3curveLinear);\n }, [height, x, y]);\n\n React.useEffect(() => {\n if (!_isChartEmpty()) {\n // eslint-disable-next-line @typescript-eslint/no-shadow\n const _points = props.data!.lineChartData![0].data;\n\n /* eslint-disable @typescript-eslint/no-explicit-any */\n const [xMin, xMax] = d3Extent(_points, (d: any) => d.x);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n x = d3ScaleLinear()\n .domain([xMin, xMax])\n .range([margin.left!, width - margin.right!]);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n y = d3ScaleLinear()\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .domain([0, d3Max(_points, (d: any) => d.y)])\n .range([height - margin.bottom!, margin.top!]);\n\n setPoints(_points as LineChartDataPoint[]);\n }\n }, []);\n\n const { data } = props;\n function _isChartEmpty(): boolean {\n return !(\n data &&\n data.lineChartData &&\n data.lineChartData.length > 0 &&\n data.lineChartData.filter(item => item.data.length === 0).length === 0\n );\n }\n function drawSparkline() {\n if (!line || !area) {\n return null;\n }\n return (\n <>\n <path\n className=\"line\"\n d={line(points)!}\n fill={'transparent'}\n opacity={1}\n strokeWidth={2}\n stroke={data!.lineChartData![0].color!}\n />\n <path\n className=\"area\"\n d={area(points)!}\n opacity={1}\n fillOpacity={0.2}\n fill={data!.lineChartData![0].color!}\n role=\"img\"\n aria-hidden\n />\n </>\n );\n }\n\n const classes = useSparklineStyles(props);\n const focusAttributes = useFocusableGroup();\n return !_isChartEmpty() ? (\n <div className={classes.inlineBlock} {...focusAttributes}>\n {width >= 50 && height >= 16 ? (\n <svg\n width={width}\n height={height}\n aria-label={`Sparkline with label ${data!.lineChartData![0].legend!}`}\n tabIndex={0}\n >\n {points ? drawSparkline() : null}\n </svg>\n ) : (\n <></>\n )}\n {props.showLegend && props.data!.lineChartData![0].legend ? (\n <svg width={valueTextWidth} height={height}>\n <text x=\"0%\" textAnchor={_isRTL ? 'end' : 'start'} dx={8} y=\"100%\" dy={-5} className={classes.valueText}>\n {props.data!.lineChartData![0].legend!}\n </text>\n </svg>\n ) : (\n <></>\n )}\n </div>\n ) : (\n <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n );\n },\n);\nSparkline.displayName = 'Sparkline';\n"],"names":["useFocusableGroup","extent","d3Extent","max","d3Max","scaleLinear","d3ScaleLinear","area","d3Area","line","d3Line","curveLinear","d3curveLinear","React","useRtl","useSparklineStyles","Sparkline","forwardRef","props","forwardedRef","margin","top","right","bottom","left","x","y","_emptyChartId","_isRTL","points","setPoints","useState","width","height","valueTextWidth","useMemo","d","curve","y0","y1","useEffect","_isChartEmpty","_points","data","lineChartData","xMin","xMax","domain","range","length","filter","item","drawSparkline","path","className","fill","opacity","strokeWidth","stroke","color","fillOpacity","role","aria-hidden","classes","focusAttributes","div","inlineBlock","svg","aria-label","legend","tabIndex","showLegend","text","textAnchor","dx","dy","valueText","id","style","displayName"],"mappings":"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"}
|
|
@@ -298,9 +298,13 @@ function defaultYAxisTickFormatter(value) {
|
|
|
298
298
|
}
|
|
299
299
|
function createNumericXAxis(xAxisParams, tickParams, chartType, culture, scaleType, _useRtl) {
|
|
300
300
|
const { domainNRangeValues, showRoundOffXTickValues = false, xAxistickSize = 6, tickPadding = 10, xAxisCount, xAxisElement, hideTickOverlap, calcMaxLabelWidth, tickStep, tick0, tickText } = xAxisParams;
|
|
301
|
+
const dStartValue = domainNRangeValues.dStartValue;
|
|
302
|
+
const dEndValue = domainNRangeValues.dEndValue;
|
|
303
|
+
const finalXmin = xAxisParams.xMinValue !== undefined ? Math.min(dStartValue, xAxisParams.xMinValue) : dStartValue;
|
|
304
|
+
const finalXmax = xAxisParams.xMaxValue !== undefined ? Math.max(dEndValue, xAxisParams.xMaxValue) : dEndValue;
|
|
301
305
|
const xAxisScale = createNumericScale(scaleType).domain([
|
|
302
|
-
|
|
303
|
-
|
|
306
|
+
finalXmin,
|
|
307
|
+
finalXmax
|
|
304
308
|
]).range([
|
|
305
309
|
domainNRangeValues.rStartValue,
|
|
306
310
|
domainNRangeValues.rEndValue
|