@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
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
2
|
+
import { useFocusableGroup } from '@fluentui/react-tabster';
|
|
3
|
+
import { extent as d3Extent, max as d3Max } from 'd3-array';
|
|
4
4
|
import { scaleLinear as d3ScaleLinear } from 'd3-scale';
|
|
5
5
|
import { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';
|
|
6
|
-
import
|
|
7
|
-
import { useFocusableGroup } from '@fluentui/react-tabster';
|
|
6
|
+
import * as React from 'react';
|
|
8
7
|
import { useRtl } from '../../utilities/index';
|
|
8
|
+
import { useSparklineStyles } from './useSparklineStyles.styles';
|
|
9
9
|
/**
|
|
10
10
|
* Sparkline is the context wrapper and container for all Sparkline content/controls,
|
|
11
11
|
* It has no direct style or slot opinions.
|
|
@@ -23,9 +23,13 @@ import { useRtl } from '../../utilities/index';
|
|
|
23
23
|
let _emptyChartId = '_SparklineChart_empty';
|
|
24
24
|
let _isRTL = useRtl();
|
|
25
25
|
const [points, setPoints] = React.useState([]);
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
const
|
|
26
|
+
var _props_width;
|
|
27
|
+
// Use props with default fallbacks instead of hardcoded values
|
|
28
|
+
const width = (_props_width = props.width) !== null && _props_width !== void 0 ? _props_width : 80;
|
|
29
|
+
var _props_height;
|
|
30
|
+
const height = (_props_height = props.height) !== null && _props_height !== void 0 ? _props_height : 20;
|
|
31
|
+
var _props_valueTextWidth;
|
|
32
|
+
const valueTextWidth = (_props_valueTextWidth = props.valueTextWidth) !== null && _props_valueTextWidth !== void 0 ? _props_valueTextWidth : 80;
|
|
29
33
|
const line = React.useMemo(()=>{
|
|
30
34
|
return d3Line().x((d)=>x(d.x)).y((d)=>y(d.y)).curve(d3curveLinear);
|
|
31
35
|
}, [
|
|
@@ -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":"AAAA;AAEA,SAASA,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,UAAUC,QAAQ,EAAEC,OAAOC,KAAK,QAAQ,WAAW;AAC5D,SAASC,eAAeC,aAAa,QAAQ,WAAW;AACxD,SAASC,QAAQC,MAAM,EAAEC,QAAQC,MAAM,EAAEC,eAAeC,aAAa,QAAQ,WAAW;AACxF,YAAYC,WAAW,QAAQ;AAG/B,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,kBAAkB,QAAQ,8BAA8B;AAEjE;;;;;CAKC,GACD,OAAO,MAAMC,0BAAqDH,MAAMI,UAAU,CAChF,CAACC,OAAOC;IACN,IAAIC,SAAS;QACXC,KAAK;QACLC,OAAO;QACPC,QAAQ;QACRC,MAAM;IACR;IACA,IAAIC;IACJ,IAAIC;IACJ,IAAIC,gBAAwB;IAC5B,IAAIC,SAAkBd;IACtB,MAAM,CAACe,QAAQC,UAAU,GAAGjB,MAAMkB,QAAQ,CAAuB,EAAE;QAGrDb;IADd,+DAA+D;IAC/D,MAAMc,QAAQd,CAAAA,eAAAA,MAAMc,KAAK,cAAXd,0BAAAA,eAAe;QACdA;IAAf,MAAMe,SAASf,CAAAA,gBAAAA,MAAMe,MAAM,cAAZf,2BAAAA,gBAAgB;QACRA;IAAvB,MAAMgB,iBAAiBhB,CAAAA,wBAAAA,MAAMgB,cAAc,cAApBhB,mCAAAA,wBAAwB;IAE/C,MAAMT,OAAOI,MAAMsB,OAAO,CAAC;QACzB,OAAOzB,SACJe,CAAC,CAAC,CAACW,IAA0BX,EAAEW,EAAEX,CAAC,GAClCC,CAAC,CAAC,CAACU,IAA0BV,EAAEU,EAAEV,CAAC,GAClCW,KAAK,CAACzB;IACX,GAAG;QAACa;QAAGC;KAAE;IAET,MAAMnB,OAAOM,MAAMsB,OAAO,CAAC;QACzB,OAAO3B,SACJiB,CAAC,CAAC,CAACW,IAA0BX,EAAEW,EAAEX,CAAC,GAClCa,EAAE,CAACL,QACHM,EAAE,CAAC,CAACH,IAA0BV,EAAEU,EAAEV,CAAC,GACnCW,KAAK,CAACzB;IACX,GAAG;QAACqB;QAAQR;QAAGC;KAAE;IAEjBb,MAAM2B,SAAS,CAAC;QACd,IAAI,CAACC,iBAAiB;YACpB,wDAAwD;YACxD,MAAMC,UAAUxB,MAAMyB,IAAI,CAAEC,aAAa,AAAC,CAAC,EAAE,CAACD,IAAI;YAElD,qDAAqD,GACrD,MAAM,CAACE,MAAMC,KAAK,GAAG5C,SAASwC,SAAS,CAACN,IAAWA,EAAEX,CAAC;YAEtD,uDAAuD;YACvDA,IAAInB,gBACDyC,MAAM,CAAC;gBAACF;gBAAMC;aAAK,EACnBE,KAAK,CAAC;gBAAC5B,OAAOI,IAAI;gBAAGQ,QAAQZ,OAAOE,KAAK;aAAE;YAC9C,uDAAuD;YACvDI,IAAIpB,eACF,qDAAqD,IACpDyC,MAAM,CAAC;gBAAC;gBAAG3C,MAAMsC,SAAS,CAACN,IAAWA,EAAEV,CAAC;aAAE,EAC3CsB,KAAK,CAAC;gBAACf,SAASb,OAAOG,MAAM;gBAAGH,OAAOC,GAAG;aAAE;YAE/CS,UAAUY;QACZ;IACF,GAAG,EAAE;IAEL,MAAM,EAAEC,IAAI,EAAE,GAAGzB;IACjB,SAASuB;QACP,OAAO,CACLE,CAAAA,QACAA,KAAKC,aAAa,IAClBD,KAAKC,aAAa,CAACK,MAAM,GAAG,KAC5BN,KAAKC,aAAa,CAACM,MAAM,CAACC,CAAAA,OAAQA,KAAKR,IAAI,CAACM,MAAM,KAAK,GAAGA,MAAM,KAAK,CAAA;IAEzE;IACA,SAASG;QACP,IAAI,CAAC3C,QAAQ,CAACF,MAAM;YAClB,OAAO;QACT;QACA,qBACE,wDACE,oBAAC8C;YACCC,WAAU;YACVlB,GAAG3B,KAAKoB;YACR0B,MAAM;YACNC,SAAS;YACTC,aAAa;YACbC,QAAQf,KAAMC,aAAa,AAAC,CAAC,EAAE,CAACe,KAAK;0BAEvC,oBAACN;YACCC,WAAU;YACVlB,GAAG7B,KAAKsB;YACR2B,SAAS;YACTI,aAAa;YACbL,MAAMZ,KAAMC,aAAa,AAAC,CAAC,EAAE,CAACe,KAAK;YACnCE,MAAK;YACLC,eAAAA;;IAIR;IAEA,MAAMC,UAAUhD,mBAAmBG;IACnC,MAAM8C,kBAAkBhE;IACxB,OAAO,CAACyC,gCACN,oBAACwB;QAAIX,WAAWS,QAAQG,WAAW;QAAG,GAAGF,eAAe;OACrDhC,SAAS,MAAMC,UAAU,mBACxB,oBAACkC;QACCnC,OAAOA;QACPC,QAAQA;QACRmC,cAAY,CAAC,qBAAqB,EAAEzB,KAAMC,aAAa,AAAC,CAAC,EAAE,CAACyB,MAAM,EAAG;QACrEC,UAAU;OAETzC,SAASuB,kBAAkB,sBAG9B,2CAEDlC,MAAMqD,UAAU,IAAIrD,MAAMyB,IAAI,CAAEC,aAAa,AAAC,CAAC,EAAE,CAACyB,MAAM,iBACvD,oBAACF;QAAInC,OAAOE;QAAgBD,QAAQA;qBAClC,oBAACuC;QAAK/C,GAAE;QAAKgD,YAAY7C,SAAS,QAAQ;QAAS8C,IAAI;QAAGhD,GAAE;QAAOiD,IAAI,CAAC;QAAGrB,WAAWS,QAAQa,SAAS;OACpG1D,MAAMyB,IAAI,CAAEC,aAAa,AAAC,CAAC,EAAE,CAACyB,MAAM,mBAIzC,2DAIJ,oBAACJ;QAAIY,IAAIlD;QAAekC,MAAM;QAASiB,OAAO;YAAEtB,SAAS;QAAI;QAAGY,cAAY;;AAEhF,GACA;AACFpD,UAAU+D,WAAW,GAAG"}
|
|
@@ -67,9 +67,13 @@ function yAxisTickFormatterInternal(value, limitWidth = false) {
|
|
|
67
67
|
* @param {IXAxisParams} xAxisParams
|
|
68
68
|
*/ export function createNumericXAxis(xAxisParams, tickParams, chartType, culture, scaleType, _useRtl) {
|
|
69
69
|
const { domainNRangeValues, showRoundOffXTickValues = false, xAxistickSize = 6, tickPadding = 10, xAxisCount, xAxisElement, hideTickOverlap, calcMaxLabelWidth, tickStep, tick0, tickText } = xAxisParams;
|
|
70
|
+
const dStartValue = domainNRangeValues.dStartValue;
|
|
71
|
+
const dEndValue = domainNRangeValues.dEndValue;
|
|
72
|
+
const finalXmin = xAxisParams.xMinValue !== undefined ? Math.min(dStartValue, xAxisParams.xMinValue) : dStartValue;
|
|
73
|
+
const finalXmax = xAxisParams.xMaxValue !== undefined ? Math.max(dEndValue, xAxisParams.xMaxValue) : dEndValue;
|
|
70
74
|
const xAxisScale = createNumericScale(scaleType).domain([
|
|
71
|
-
|
|
72
|
-
|
|
75
|
+
finalXmin,
|
|
76
|
+
finalXmax
|
|
73
77
|
]).range([
|
|
74
78
|
domainNRangeValues.rStartValue,
|
|
75
79
|
domainNRangeValues.rEndValue
|