@fluentui/react-charts 0.0.0-nightly-20260119-0407.1 → 0.0.0-nightly-20260121-0406.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/lib/components/CommonComponents/CartesianChart.js +31 -14
- package/lib/components/CommonComponents/CartesianChart.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +15 -5
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/utilities/ChartTitle.js +17 -5
- package/lib/utilities/ChartTitle.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/CartesianChart.js +31 -14
- package/lib-commonjs/components/CommonComponents/CartesianChart.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +15 -5
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/utilities/ChartTitle.js +17 -5
- package/lib-commonjs/utilities/ChartTitle.js.map +1 -1
- package/package.json +10 -10
|
@@ -15,9 +15,20 @@ const _Commonstyles = require("./Common.styles");
|
|
|
15
15
|
const _utilities = require("./utilities");
|
|
16
16
|
const AXIS_TITLE_PADDING = 8;
|
|
17
17
|
const ChartTitle = (props)=>{
|
|
18
|
-
const { title, x, y, maxWidth, className, titleStyles,
|
|
18
|
+
const { title, x, y, maxWidth, className, titleStyles, tooltipProps, tooltipClassName } = props;
|
|
19
19
|
const { titleFont, titleXAnchor, titleYAnchor, titlePad } = titleStyles !== null && titleStyles !== void 0 ? titleStyles : {};
|
|
20
|
-
const
|
|
20
|
+
const computedTextAnchor = titleXAnchor === 'left' ? 'start' : titleXAnchor === 'right' ? 'end' : 'middle';
|
|
21
|
+
// Calculate dominantBaseline from titleYAnchor for vertical alignment
|
|
22
|
+
// 'top' means text hangs below the y position (text-before-edge/hanging)
|
|
23
|
+
// 'bottom' means text sits above the y position (text-after-edge/alphabetic)
|
|
24
|
+
// 'middle' means text is centered on the y position (central)
|
|
25
|
+
const computedDominantBaseline = titleYAnchor === 'top' ? 'hanging' : titleYAnchor === 'bottom' ? 'alphabetic' : titleYAnchor === 'middle' ? 'central' : 'auto';
|
|
26
|
+
var _titlePad_l, _titlePad_r;
|
|
27
|
+
// Calculate x position with padding adjustments
|
|
28
|
+
const computedX = x + ((_titlePad_l = titlePad === null || titlePad === void 0 ? void 0 : titlePad.l) !== null && _titlePad_l !== void 0 ? _titlePad_l : 0) - ((_titlePad_r = titlePad === null || titlePad === void 0 ? void 0 : titlePad.r) !== null && _titlePad_r !== void 0 ? _titlePad_r : 0);
|
|
29
|
+
var _titlePad_t, _titlePad_b;
|
|
30
|
+
// Calculate y position with padding adjustments
|
|
31
|
+
const calculatedY = (y !== null && y !== void 0 ? y : Math.max((typeof (titleFont === null || titleFont === void 0 ? void 0 : titleFont.size) === 'number' ? titleFont.size : 13) + AXIS_TITLE_PADDING, _Commonstyles.CHART_TITLE_PADDING - AXIS_TITLE_PADDING)) + ((_titlePad_t = titlePad === null || titlePad === void 0 ? void 0 : titlePad.t) !== null && _titlePad_t !== void 0 ? _titlePad_t : 0) - ((_titlePad_b = titlePad === null || titlePad === void 0 ? void 0 : titlePad.b) !== null && _titlePad_b !== void 0 ? _titlePad_b : 0);
|
|
21
32
|
const commonSvgToolTipProps = {
|
|
22
33
|
wrapContent: _utilities.wrapContent,
|
|
23
34
|
showBackground: true,
|
|
@@ -28,12 +39,13 @@ const ChartTitle = (props)=>{
|
|
|
28
39
|
...commonSvgToolTipProps,
|
|
29
40
|
content: title,
|
|
30
41
|
textProps: {
|
|
31
|
-
x,
|
|
42
|
+
x: computedX,
|
|
32
43
|
y: calculatedY,
|
|
33
|
-
textAnchor,
|
|
44
|
+
textAnchor: computedTextAnchor,
|
|
45
|
+
dominantBaseline: computedDominantBaseline,
|
|
34
46
|
className,
|
|
35
47
|
'aria-hidden': true,
|
|
36
|
-
style: (0, _Commonstyles.getChartTitleInlineStyles)(titleFont
|
|
48
|
+
style: (0, _Commonstyles.getChartTitleInlineStyles)(titleFont)
|
|
37
49
|
},
|
|
38
50
|
maxWidth: maxWidth
|
|
39
51
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utilities/ChartTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SVGTooltipText, SVGTooltipTextProps } from './SVGTooltipText';\nimport { CHART_TITLE_PADDING, getChartTitleInlineStyles, TitleStyles } from './Common.styles';\nimport { wrapContent } from './utilities';\n\nconst AXIS_TITLE_PADDING = 8;\n\n/**\n * Props for the ChartTitle component\n */\nexport interface ChartTitleProps {\n /**\n * The title text to display\n */\n title: string;\n /**\n * The x position for the title (typically center of chart)\n */\n x: number;\n /**\n * Optional custom y position. If not provided, calculated based on font size.\n */\n y?: number;\n /**\n * Maximum width for the title text before wrapping/truncation\n */\n maxWidth?: number;\n /**\n * CSS class name for the title text element\n */\n className?: string;\n /**\n * Title styles configuration (font, anchors, padding)\n */\n titleStyles?: TitleStyles;\n /**\n * Text anchor for SVG text element\n * @default 'middle'\n */\n textAnchor?: 'start' | 'middle' | 'end';\n /**\n * Additional SVGTooltipText props to pass through\n */\n tooltipProps?: Partial<SVGTooltipTextProps>;\n /**\n * CSS class for the tooltip\n */\n tooltipClassName?: string;\n}\n\n/**\n * A reusable chart title component that renders an SVG text element with tooltip support.\n * This component encapsulates the common pattern for rendering chart titles across all chart types.\n */\nexport const ChartTitle: React.FunctionComponent<ChartTitleProps> = props => {\n const {
|
|
1
|
+
{"version":3,"sources":["../src/utilities/ChartTitle.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SVGTooltipText, SVGTooltipTextProps } from './SVGTooltipText';\nimport { CHART_TITLE_PADDING, getChartTitleInlineStyles, TitleStyles } from './Common.styles';\nimport { wrapContent } from './utilities';\n\nconst AXIS_TITLE_PADDING = 8;\n\n/**\n * Props for the ChartTitle component\n */\nexport interface ChartTitleProps {\n /**\n * The title text to display\n */\n title: string;\n /**\n * The x position for the title (typically center of chart)\n */\n x: number;\n /**\n * Optional custom y position. If not provided, calculated based on font size.\n */\n y?: number;\n /**\n * Maximum width for the title text before wrapping/truncation\n */\n maxWidth?: number;\n /**\n * CSS class name for the title text element\n */\n className?: string;\n /**\n * Title styles configuration (font, anchors, padding)\n */\n titleStyles?: TitleStyles;\n /**\n * Text anchor for SVG text element\n * @default 'middle'\n */\n textAnchor?: 'start' | 'middle' | 'end';\n /**\n * Additional SVGTooltipText props to pass through\n */\n tooltipProps?: Partial<SVGTooltipTextProps>;\n /**\n * CSS class for the tooltip\n */\n tooltipClassName?: string;\n}\n\n/**\n * A reusable chart title component that renders an SVG text element with tooltip support.\n * This component encapsulates the common pattern for rendering chart titles across all chart types.\n */\nexport const ChartTitle: React.FunctionComponent<ChartTitleProps> = props => {\n const { title, x, y, maxWidth, className, titleStyles, tooltipProps, tooltipClassName } = props;\n\n const { titleFont, titleXAnchor, titleYAnchor, titlePad } = titleStyles ?? {};\n const computedTextAnchor = titleXAnchor === 'left' ? 'start' : titleXAnchor === 'right' ? 'end' : 'middle';\n\n // Calculate dominantBaseline from titleYAnchor for vertical alignment\n // 'top' means text hangs below the y position (text-before-edge/hanging)\n // 'bottom' means text sits above the y position (text-after-edge/alphabetic)\n // 'middle' means text is centered on the y position (central)\n const computedDominantBaseline =\n titleYAnchor === 'top'\n ? 'hanging'\n : titleYAnchor === 'bottom'\n ? 'alphabetic'\n : titleYAnchor === 'middle'\n ? 'central'\n : 'auto';\n\n // Calculate x position with padding adjustments\n const computedX = x + (titlePad?.l ?? 0) - (titlePad?.r ?? 0);\n\n // Calculate y position with padding adjustments\n const calculatedY =\n (y ??\n Math.max(\n (typeof titleFont?.size === 'number' ? titleFont.size : 13) + AXIS_TITLE_PADDING,\n CHART_TITLE_PADDING - AXIS_TITLE_PADDING,\n )) +\n (titlePad?.t ?? 0) -\n (titlePad?.b ?? 0);\n\n const commonSvgToolTipProps: Partial<SVGTooltipTextProps> = {\n wrapContent,\n showBackground: true,\n className: tooltipClassName,\n ...tooltipProps,\n };\n return (\n <SVGTooltipText\n {...commonSvgToolTipProps}\n content={title}\n textProps={{\n x: computedX,\n y: calculatedY,\n textAnchor: computedTextAnchor,\n dominantBaseline: computedDominantBaseline,\n className,\n 'aria-hidden': true,\n style: getChartTitleInlineStyles(titleFont),\n }}\n maxWidth={maxWidth}\n />\n );\n};\n\nChartTitle.displayName = 'ChartTitle';\n"],"names":["React","SVGTooltipText","CHART_TITLE_PADDING","getChartTitleInlineStyles","wrapContent","AXIS_TITLE_PADDING","ChartTitle","props","title","x","y","maxWidth","className","titleStyles","tooltipProps","tooltipClassName","titleFont","titleXAnchor","titleYAnchor","titlePad","computedTextAnchor","computedDominantBaseline","computedX","l","r","calculatedY","Math","max","size","t","b","commonSvgToolTipProps","showBackground","content","textProps","textAnchor","dominantBaseline","style","displayName"],"mappings":";;;;+BAsDaM;;;;;;;iEAtDU,QAAQ;gCACqB,mBAAmB;8BACK,kBAAkB;2BAClE,cAAc;AAE1C,MAAMD,qBAAqB;AAiDpB,mBAA6DE,CAAAA;IAClE,MAAM,EAAEC,KAAK,EAAEC,CAAC,EAAEC,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,WAAW,EAAEC,YAAY,EAAEC,gBAAgB,EAAE,GAAGR;IAE1F,MAAM,EAAES,SAAS,EAAEC,YAAY,EAAEC,YAAY,EAAEC,QAAQ,EAAE,GAAGN,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,CAAC;IAC5E,MAAMO,qBAAqBH,iBAAiB,SAAS,UAAUA,iBAAiB,UAAU,QAAQ;IAElG,sEAAsE;IACtE,yEAAyE;IACzE,6EAA6E;IAC7E,8DAA8D;IAC9D,MAAMI,2BACJH,iBAAiB,QACb,YACAA,iBAAiB,WACjB,eACAA,iBAAiB,WACjB,YACA;QAGiBC,aAAqBA;IAD5C,gDAAgD;IAChD,MAAMG,YAAYb,IAAKU,CAAAA,CAAAA,cAAAA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAUI,AAAC,MAAA,QAAXJ,gBAAAA,KAAAA,IAAAA,eAAe,CAAA,IAAMA,CAAAA,cAAAA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAUK,AAAC,MAAA,QAAXL,gBAAAA,KAAAA,IAAAA,eAAe,CAAA;QASxDA,aACAA;IARH,gDAAgD;IAChD,MAAMM,cACHf,CAAAA,MAAAA,QAAAA,MAAAA,KAAAA,IAAAA,IACCgB,KAAKC,GAAG,CACL,CAAA,OAAOX,eAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAWY,IAAAA,AAAI,MAAK,WAAWZ,UAAUY,IAAI,GAAG,EAAA,CAAC,GAAKvB,oBAC9DH,iCAAAA,GAAsBG,mBAAAA,CACxB,IACDc,CAAAA,cAAAA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAUU,AAAC,MAAA,QAAXV,gBAAAA,KAAAA,IAAAA,eAAe,CAAA,IACfA,CAAAA,cAAAA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAUW,AAAC,MAAA,QAAXX,gBAAAA,KAAAA,IAAAA,eAAe,CAAA;IAElB,MAAMY,wBAAsD;qBAC1D3B,sBAAAA;QACA4B,gBAAgB;QAChBpB,WAAWG;QACX,GAAGD,YAAY;IACjB;IACA,OAAA,WAAA,GACE,OAAA,aAAA,CAACb,8BAAAA,EAAAA;QACE,GAAG8B,qBAAqB;QACzBE,SAASzB;QACT0B,WAAW;YACTzB,GAAGa;YACHZ,GAAGe;YACHU,YAAYf;YACZgB,kBAAkBf;YAClBT;YACA,eAAe;YACfyB,WAAOlC,uCAAAA,EAA0Ba;QACnC;QACAL,UAAUA;;AAGhB,EAAE;AAEFL,WAAWgC,WAAW,GAAG"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-charts",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20260121-0406.1",
|
|
4
4
|
"description": "React web chart controls for Microsoft fluentui v9 system.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -22,15 +22,15 @@
|
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@fluentui/chart-utilities": "^1.1.38",
|
|
25
|
-
"@fluentui/react-button": "0.0.0-nightly-
|
|
26
|
-
"@fluentui/react-jsx-runtime": "0.0.0-nightly-
|
|
27
|
-
"@fluentui/react-overflow": "0.0.0-nightly-
|
|
28
|
-
"@fluentui/react-popover": "0.0.0-nightly-
|
|
29
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
30
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
31
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
32
|
-
"@fluentui/react-tooltip": "0.0.0-nightly-
|
|
33
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
25
|
+
"@fluentui/react-button": "0.0.0-nightly-20260121-0406.1",
|
|
26
|
+
"@fluentui/react-jsx-runtime": "0.0.0-nightly-20260121-0406.1",
|
|
27
|
+
"@fluentui/react-overflow": "0.0.0-nightly-20260121-0406.1",
|
|
28
|
+
"@fluentui/react-popover": "0.0.0-nightly-20260121-0406.1",
|
|
29
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20260121-0406.1",
|
|
30
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20260121-0406.1",
|
|
31
|
+
"@fluentui/react-theme": "0.0.0-nightly-20260121-0406.1",
|
|
32
|
+
"@fluentui/react-tooltip": "0.0.0-nightly-20260121-0406.1",
|
|
33
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20260121-0406.1",
|
|
34
34
|
"@griffel/react": "^1.5.32",
|
|
35
35
|
"@swc/helpers": "^0.5.1",
|
|
36
36
|
"@types/d3-array": "^3.0.0",
|