@fluentui/react-charts 9.2.3 → 9.3.0

package/lib-commonjs/components/LineChart/LineChart.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/LineChart/LineChart.types.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport { RenderFunction } from '../../utilities/index';\nimport {\n  ChartProps,\n  LineChartPoints,\n  Margins,\n  Basestate,\n  RefArrayData,\n  CustomizedCalloutData,\n} from '../../types/index';\nimport { EventAnnotation } from '../../types/EventAnnotation';\nimport {\n  CartesianChartProps,\n  CartesianChartStyleProps,\n  CartesianChartStyles,\n  ChildProps,\n} from '../CommonComponents/index';\n\nexport type { ChildProps, LineChartPoints, Margins, Basestate, RefArrayData };\n\n/**\n * Line Chart properties\n * {@docCategory LineChart}\n */\nexport interface LineChartProps extends CartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: ChartProps;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: LineChartStyles;\n\n  /**\n   * Show event annotation\n   */\n  eventAnnotationProps?: EventsAnnotationProps;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: RenderFunction<CustomizedCalloutData>;\n\n  /**\n   * Define a custom callout renderer for a stack; default is to render per data point\n   */\n  onRenderCalloutPerStack?: RenderFunction<CustomizedCalloutData>;\n\n  /**\n   * Callback for getting callout description message\n   */\n  getCalloutDescriptionMessage?: (calloutDataProps: CustomizedCalloutData) => string | undefined;\n\n  /*\n   * Color fill bars for the chart,\n   */\n  colorFillBars?: ColorFillBarsProps[];\n\n  /**\n   * if this is set to true, then for each line there will be a unique shape assigned to the point,\n   * there are total 8 shapes which are as follow circle, square, triangele, diamond, pyramid,\n   *  hexagon, pentagon and octagon, which will get assigned as respectively, if there are more\n   * than 8 lines in the line chart then it will again start from cicle to octagon.\n   * setting this flag to true will also change the behavior of the points, like for a\n   * line, last point shape and first point shape will be visible all the times, and all\n   * other points will get enlarge only when hovered over them\n   * if set to false default shape will be circle, with the existing behavior\n   * @default false\n   */\n  allowMultipleShapesForPoints?: boolean;\n\n  /*\n   * Optimize line chart rendering for large data set. If this prop is enabled, line chart\n   * can easily render over 10K datapoints with multiple lines smoothly.\n   * This rendering mechanism does not support gaps in lines.\n   */\n  optimizeLargeData?: boolean;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * @default false\n   * The prop used to enable the perf optimization\n   */\n  enablePerfOptimization?: boolean;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface EventsAnnotationProps {\n  events: EventAnnotation[];\n  strokeColor?: string;\n  labelColor?: string;\n  labelHeight?: number;\n  labelWidth?: number;\n  mergedLabel: (count: number) => string;\n}\n\n/**\n * Line Chart styles\n * {@docCategory LineChart}\n */\nexport interface LineChartStyles extends CartesianChartStyles {\n  /**\n   * styles for line border\n   */\n  lineBorder?: string;\n\n  /**\n   * styles for marker label\n   */\n  markerLabel?: string;\n}\n\n/**\n * Line Chart style properties\n * {@docCategory LineChart}\n */\nexport interface LineChartStyleProps extends CartesianChartStyleProps {}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface ColorFillBarsProps {\n  legend: string;\n  color: string;\n  data: ColorFillBarData[];\n  applyPattern?: boolean;\n  onLegendClick?: (selectedLegend: string | string[] | null) => void | undefined;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface ColorFillBarData {\n  startX: number | Date;\n  endX: number | Date;\n}\n"],"names":[],"mappings":"AAAA,uDAAuD,GAyIvD;;CAEC,GACD,WAGC"}
+{"version":3,"sources":["../src/components/LineChart/LineChart.types.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport { RenderFunction } from '../../utilities/index';\nimport {\n  ChartProps,\n  LineChartPoints,\n  Margins,\n  Basestate,\n  RefArrayData,\n  CustomizedCalloutData,\n} from '../../types/index';\nimport { EventAnnotation } from '../../types/EventAnnotation';\nimport {\n  CartesianChartProps,\n  CartesianChartStyleProps,\n  CartesianChartStyles,\n  ChildProps,\n} from '../CommonComponents/index';\n\nexport type { ChildProps, LineChartPoints, Margins, Basestate, RefArrayData };\n\n/**\n * Line Chart properties\n * {@docCategory LineChart}\n */\nexport interface LineChartProps extends CartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: ChartProps;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: LineChartStyles;\n\n  /**\n   * Show event annotation\n   */\n  eventAnnotationProps?: EventsAnnotationProps;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: RenderFunction<CustomizedCalloutData>;\n\n  /**\n   * Define a custom callout renderer for a stack; default is to render per data point\n   */\n  onRenderCalloutPerStack?: RenderFunction<CustomizedCalloutData>;\n\n  /**\n   * Callback for getting callout description message\n   */\n  getCalloutDescriptionMessage?: (calloutDataProps: CustomizedCalloutData) => string | undefined;\n\n  /*\n   * Color fill bars for the chart,\n   */\n  colorFillBars?: ColorFillBarsProps[];\n\n  /**\n   * if this is set to true, then for each line there will be a unique shape assigned to the point,\n   * there are total 8 shapes which are as follow circle, square, triangele, diamond, pyramid,\n   *  hexagon, pentagon and octagon, which will get assigned as respectively, if there are more\n   * than 8 lines in the line chart then it will again start from cicle to octagon.\n   * setting this flag to true will also change the behavior of the points, like for a\n   * line, last point shape and first point shape will be visible all the times, and all\n   * other points will get enlarge only when hovered over them\n   * if set to false default shape will be circle, with the existing behavior\n   * @default false\n   */\n  allowMultipleShapesForPoints?: boolean;\n\n  /*\n   * Optimize line chart rendering for large data set. If this prop is enabled, line chart\n   * can easily render over 10K datapoints with multiple lines smoothly.\n   * This rendering mechanism does not support gaps in lines.\n   */\n  optimizeLargeData?: boolean;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * @default false\n   * The prop used to enable the perf optimization\n   */\n  enablePerfOptimization?: boolean;\n\n  /**\n   * To enable callout for individual line or complete stack.\n   * @default true\n   * @type \\{boolean \\}\n   */\n  isCalloutForStack?: boolean;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface EventsAnnotationProps {\n  events: EventAnnotation[];\n  strokeColor?: string;\n  labelColor?: string;\n  labelHeight?: number;\n  labelWidth?: number;\n  mergedLabel: (count: number) => string;\n}\n\n/**\n * Line Chart styles\n * {@docCategory LineChart}\n */\nexport interface LineChartStyles extends CartesianChartStyles {\n  /**\n   * styles for line border\n   */\n  lineBorder?: string;\n\n  /**\n   * styles for marker label\n   */\n  markerLabel?: string;\n}\n\n/**\n * Line Chart style properties\n * {@docCategory LineChart}\n */\nexport interface LineChartStyleProps extends CartesianChartStyleProps {}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface ColorFillBarsProps {\n  legend: string;\n  color: string;\n  data: ColorFillBarData[];\n  applyPattern?: boolean;\n  onLegendClick?: (selectedLegend: string | string[] | null) => void | undefined;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface ColorFillBarData {\n  startX: number | Date;\n  endX: number | Date;\n}\n"],"names":[],"mappings":"AAAA,uDAAuD,GAgJvD;;CAEC,GACD,WAGC"}

package/lib-commonjs/components/LineChart/eventAnnotation/LabelLink.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/LineChart/eventAnnotation/LabelLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/LineChart/eventAnnotation/LabelLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { EventAnnotation } from '../../../types/EventAnnotation';\nimport { Textbox } from './Textbox';\nimport { getColorFromToken } from '../../../utilities/colors';\nimport { tokens } from '@fluentui/react-theme';\n\nexport interface LineDef extends EventAnnotation {\n  x: number;\n}\n\nexport interface LabelDef {\n  x: number;\n  aggregatedIdx: number[];\n  anchor: 'start' | 'end';\n}\n\ninterface LabelLinkProps {\n  lineDefs: LineDef[];\n  labelDef: LabelDef;\n  textY: number;\n  textWidth: number;\n  textLineHeight: number;\n  textFontSize: string;\n  textColor: string | undefined;\n  mergedLabel: (count: number) => string;\n}\n\nexport const LabelLink: React.FunctionComponent<LabelLinkProps> = props => {\n  const gRef = React.useRef<SVGGElement>(null);\n  const [showCard, setShowCard] = React.useState(false);\n  const onClick = () => setShowCard(true);\n\n  let callout: React.ReactNode = null;\n  if (showCard) {\n    const cards = props.labelDef.aggregatedIdx.map(i => props.lineDefs[i].onRenderCard!).filter(c => !!c);\n    if (cards.length > 0) {\n      callout = null;\n      // TODO - need to replace callout with popover\n      /*callout = {\n        /* <Callout\n          target={gRef.current}\n          // eslint-disable-next-line react/jsx-no-bind\n          onDismiss={onDismiss}\n          setInitialFocus={true}\n          role=\"dialog\"\n        >\n          <FocusZone isCircularNavigation={true} direction={FocusZoneDirection.vertical}>\n            <List<() => React.ReactNode>\n              items={cards}\n              // eslint-disable-next-line react/jsx-no-bind\n              onRenderCell={onRenderCell}\n            />\n          </FocusZone>\n        </Callout>\n      };*/\n    }\n  }\n\n  let text: string;\n  const fill: string | undefined = props.textColor\n    ? getColorFromToken(props.textColor, false)\n    : tokens.colorNeutralForeground1;\n\n  if (props.labelDef.aggregatedIdx.length === 1) {\n    text = props.lineDefs[props.labelDef.aggregatedIdx[0]].event;\n  } else {\n    text = props.mergedLabel(props.labelDef.aggregatedIdx.length);\n  }\n\n  return (\n    <>\n      <g ref={gRef} onClick={onClick} data-is-focusable={false} style={{ cursor: 'pointer' }} role=\"button\">\n        <Textbox\n          text={text}\n          x={props.labelDef.x}\n          y={props.textY}\n          width={props.textWidth}\n          lineHeight={props.textLineHeight}\n          textAnchor={props.labelDef.anchor}\n          fontSize={props.textFontSize}\n          fill={fill}\n        />\n      </g>\n      {callout}\n    </>\n  );\n};\n"],"names":["React","Textbox","getColorFromToken","tokens","LabelLink","props","gRef","useRef","showCard","setShowCard","useState","onClick","callout","cards","labelDef","aggregatedIdx","map","i","lineDefs","onRenderCard","filter","c","length","text","fill","textColor","colorNeutralForeground1","event","mergedLabel","g","ref","data-is-focusable","style","cursor","role","x","y","textY","width","textWidth","lineHeight","textLineHeight","textAnchor","anchor","fontSize","textFontSize"],"mappings":";;;;+BA2BaI;;;;;;;iEA3BU,QAAQ;yBAEP,YAAY;wBACF,4BAA4B;4BACvC,wBAAwB;AAuBxC,kBAA2DC,CAAAA;IAChE,MAAMC,OAAON,OAAMO,MAAM,CAAc;IACvC,MAAM,CAACC,UAAUC,YAAY,GAAGT,OAAMU,QAAQ,CAAC;IAC/C,MAAMC,UAAU,IAAMF,YAAY;IAElC,IAAIG,UAA2B;IAC/B,IAAIJ,UAAU;QACZ,MAAMK,QAAQR,MAAMS,QAAQ,CAACC,aAAa,CAACC,GAAG,CAACC,CAAAA,IAAKZ,MAAMa,QAAQ,CAACD,EAAE,CAACE,YAAY,EAAGC,MAAM,CAACC,CAAAA,IAAK,CAAC,CAACA;QACnG,IAAIR,MAAMS,MAAM,GAAG,GAAG;YACpBV,UAAU;QACV,8CAA8C;QAC9C;;;;;;;;;;;;;;;;QAgBE,GACJ;IACF;IAEA,IAAIW;IACJ,MAAMC,OAA2BnB,MAAMoB,SAAS,OAC5CvB,yBAAAA,EAAkBG,MAAMoB,SAAS,EAAE,SACnCtB,kBAAAA,CAAOuB,uBAAuB;IAElC,IAAIrB,MAAMS,QAAQ,CAACC,aAAa,CAACO,MAAM,KAAK,GAAG;QAC7CC,OAAOlB,MAAMa,QAAQ,CAACb,MAAMS,QAAQ,CAACC,aAAa,CAAC,EAAE,CAAC,CAACY,KAAK;IAC9D,OAAO;QACLJ,OAAOlB,MAAMuB,WAAW,CAACvB,MAAMS,QAAQ,CAACC,aAAa,CAACO,MAAM;IAC9D;IAEA,OAAA,WAAA,GACE,OAAA,aAAA,CAAA,OAAA,QAAA,EAAA,MAAA,WAAA,GACE,OAAA,aAAA,CAACO,KAAAA;QAAEC,KAAKxB;QAAMK,SAASA;QAASoB,qBAAmB;QAAOC,OAAO;YAAEC,QAAQ;QAAU;QAAGC,MAAK;qBAC3F,OAAA,aAAA,CAACjC,gBAAAA,EAAAA;QACCsB,MAAMA;QACNY,GAAG9B,MAAMS,QAAQ,CAACqB,CAAC;QACnBC,GAAG/B,MAAMgC,KAAK;QACdC,OAAOjC,MAAMkC,SAAS;QACtBC,YAAYnC,MAAMoC,cAAc;QAChCC,YAAYrC,MAAMS,QAAQ,CAAC6B,MAAM;QACjCC,UAAUvC,MAAMwC,YAAY;QAC5BrB,MAAMA;SAGTZ;AAGP,EAAE"}
+{"version":3,"sources":["../src/components/LineChart/eventAnnotation/LabelLink.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { EventAnnotation } from '../../../types/EventAnnotation';\nimport { Textbox } from './Textbox';\nimport { getColorFromToken } from '../../../utilities/colors';\nimport { tokens } from '@fluentui/react-theme';\n\nexport interface LineDef extends EventAnnotation {\n  x: number;\n}\n\nexport interface LabelDef {\n  x: number;\n  aggregatedIdx: number[];\n  anchor: 'start' | 'end';\n}\n\ninterface LabelLinkProps {\n  lineDefs: LineDef[];\n  labelDef: LabelDef;\n  textY: number;\n  textWidth: number;\n  textLineHeight: number;\n  textFontSize: string;\n  textColor: string | undefined;\n  mergedLabel: (count: number) => string;\n}\n\nexport const LabelLink: React.FunctionComponent<LabelLinkProps> = props => {\n  const gRef = React.useRef<SVGGElement>(null);\n  const [showCard, setShowCard] = React.useState(false);\n  const onClick = () => setShowCard(true);\n\n  let callout: React.ReactNode = null;\n  if (showCard) {\n    const cards = props.labelDef.aggregatedIdx.map(i => props.lineDefs[i].onRenderCard!).filter(c => !!c);\n    if (cards.length > 0) {\n      callout = null;\n      // TODO - need to replace callout with popover\n      /*callout = {\n        /* <Callout\n          target={gRef.current}\n          // eslint-disable-next-line react/jsx-no-bind\n          onDismiss={onDismiss}\n          setInitialFocus={true}\n          role=\"dialog\"\n        >\n          <FocusZone isCircularNavigation={true} direction={FocusZoneDirection.vertical}>\n            <List<() => React.ReactNode>\n              items={cards}\n              // eslint-disable-next-line react/jsx-no-bind\n              onRenderCell={onRenderCell}\n            />\n          </FocusZone>\n        </Callout>\n      };*/\n    }\n  }\n\n  let text: string;\n  const fill: string | undefined = props.textColor\n    ? getColorFromToken(props.textColor, false)\n    : tokens.colorNeutralForeground1;\n\n  if (props.labelDef.aggregatedIdx.length === 1) {\n    text = props.lineDefs[props.labelDef.aggregatedIdx[0]].event;\n  } else {\n    text = props.mergedLabel(props.labelDef.aggregatedIdx.length);\n  }\n\n  return (\n    <>\n      <g ref={gRef} onClick={onClick} data-is-focusable={false} style={{ cursor: 'pointer' }} role=\"button\">\n        <Textbox\n          text={text}\n          x={props.labelDef.x}\n          y={props.textY}\n          width={props.textWidth}\n          lineHeight={props.textLineHeight}\n          textAnchor={props.labelDef.anchor}\n          fontSize={props.textFontSize}\n          fill={fill}\n        />\n      </g>\n      {callout}\n    </>\n  );\n};\n"],"names":["React","Textbox","getColorFromToken","tokens","LabelLink","props","gRef","useRef","showCard","setShowCard","useState","onClick","callout","cards","labelDef","aggregatedIdx","map","i","lineDefs","onRenderCard","filter","c","length","text","fill","textColor","colorNeutralForeground1","event","mergedLabel","g","ref","data-is-focusable","style","cursor","role","x","y","textY","width","textWidth","lineHeight","textLineHeight","textAnchor","anchor","fontSize","textFontSize"],"mappings":"AAAA;;;;;+BA6BaI;;;;;;;iEA3BU,QAAQ;yBAEP,YAAY;wBACF,4BAA4B;4BACvC,wBAAwB;AAuBxC,kBAA2DC,CAAAA;IAChE,MAAMC,OAAON,OAAMO,MAAM,CAAc;IACvC,MAAM,CAACC,UAAUC,YAAY,GAAGT,OAAMU,QAAQ,CAAC;IAC/C,MAAMC,UAAU,IAAMF,YAAY;IAElC,IAAIG,UAA2B;IAC/B,IAAIJ,UAAU;QACZ,MAAMK,QAAQR,MAAMS,QAAQ,CAACC,aAAa,CAACC,GAAG,CAACC,CAAAA,IAAKZ,MAAMa,QAAQ,CAACD,EAAE,CAACE,YAAY,EAAGC,MAAM,CAACC,CAAAA,IAAK,CAAC,CAACA;QACnG,IAAIR,MAAMS,MAAM,GAAG,GAAG;YACpBV,UAAU;QACV,8CAA8C;QAC9C;;;;;;;;;;;;;;;;QAgBE,GACJ;IACF;IAEA,IAAIW;IACJ,MAAMC,OAA2BnB,MAAMoB,SAAS,OAC5CvB,yBAAAA,EAAkBG,MAAMoB,SAAS,EAAE,SACnCtB,kBAAAA,CAAOuB,uBAAuB;IAElC,IAAIrB,MAAMS,QAAQ,CAACC,aAAa,CAACO,MAAM,KAAK,GAAG;QAC7CC,OAAOlB,MAAMa,QAAQ,CAACb,MAAMS,QAAQ,CAACC,aAAa,CAAC,EAAE,CAAC,CAACY,KAAK;IAC9D,OAAO;QACLJ,OAAOlB,MAAMuB,WAAW,CAACvB,MAAMS,QAAQ,CAACC,aAAa,CAACO,MAAM;IAC9D;IAEA,OAAA,WAAA,GACE,OAAA,aAAA,CAAA,OAAA,QAAA,EAAA,MAAA,WAAA,GACE,OAAA,aAAA,CAACO,KAAAA;QAAEC,KAAKxB;QAAMK,SAASA;QAASoB,qBAAmB;QAAOC,OAAO;YAAEC,QAAQ;QAAU;QAAGC,MAAK;qBAC3F,OAAA,aAAA,CAACjC,gBAAAA,EAAAA;QACCsB,MAAMA;QACNY,GAAG9B,MAAMS,QAAQ,CAACqB,CAAC;QACnBC,GAAG/B,MAAMgC,KAAK;QACdC,OAAOjC,MAAMkC,SAAS;QACtBC,YAAYnC,MAAMoC,cAAc;QAChCC,YAAYrC,MAAMS,QAAQ,CAAC6B,MAAM;QACjCC,UAAUvC,MAAMwC,YAAY;QAC5BrB,MAAMA;SAGTZ;AAGP,EAAE"}

package/lib-commonjs/components/LineChart/eventAnnotation/Textbox.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/LineChart/eventAnnotation/Textbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/LineChart/eventAnnotation/Textbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { select } from 'd3-selection';\nimport { getSecureProps } from '../../../utilities/utilities';\n\ninterface TextboxProps {\n  text: string;\n  width: number;\n  x: number;\n  y: number;\n  lineHeight: number;\n  textAnchor?: 'start' | 'middle' | 'end';\n  fontSize?: string;\n  fill?: string;\n}\n\nexport const Textbox: React.FunctionComponent<TextboxProps> = props => {\n  const textElementRef: React.RefObject<SVGTextElement> = React.useRef(null);\n\n  const wrapWords = () => {\n    if (!textElementRef.current) {\n      return;\n    }\n    const text = select(textElementRef.current);\n    const words = props.text.split(/\\s+/);\n    let line: string[] = [];\n    let tspan = text.append<SVGTSpanElement>('tspan');\n    let numLines = 0;\n\n    words.forEach(word => {\n      line.push(word);\n      tspan.text(line.join(' '));\n      const node = tspan.node();\n      if (node && node.getComputedTextLength() > props.width && line.length > 1) {\n        numLines++;\n        line.pop();\n        tspan.text(line.join(' '));\n        line = [word];\n        tspan = text.append<SVGTSpanElement>('tspan').text(word).attr('dy', props.lineHeight).attr('x', props.x);\n      }\n    });\n    // bottom aligns text\n    text.attr('dy', -numLines * props.lineHeight);\n\n    return () => {\n      text.selectAll('tspan').remove();\n    };\n  };\n  React.useEffect(wrapWords);\n\n  const { lineHeight, ...rest } = props;\n\n  return <text ref={textElementRef} {...getSecureProps(rest)} />;\n};\n"],"names":["React","select","getSecureProps","Textbox","props","textElementRef","useRef","wrapWords","current","text","words","split","line","tspan","append","numLines","forEach","word","push","join","node","getComputedTextLength","width","length","pop","attr","lineHeight","x","selectAll","remove","useEffect","rest","ref"],"mappings":";;;;+BAeaG;;;;;;;iEAfU,QAAQ;6BACR,eAAe;2BACP,+BAA+B;AAavD,gBAAuDC,CAAAA;IAC5D,MAAMC,iBAAkDL,OAAMM,MAAM,CAAC;IAErE,MAAMC,YAAY;QAChB,IAAI,CAACF,eAAeG,OAAO,EAAE;YAC3B;QACF;QACA,MAAMC,OAAOR,uBAAAA,EAAOI,eAAeG,OAAO;QAC1C,MAAME,QAAQN,MAAMK,IAAI,CAACE,KAAK,CAAC;QAC/B,IAAIC,OAAiB,EAAE;QACvB,IAAIC,QAAQJ,KAAKK,MAAM,CAAkB;QACzC,IAAIC,WAAW;QAEfL,MAAMM,OAAO,CAACC,CAAAA;YACZL,KAAKM,IAAI,CAACD;YACVJ,MAAMJ,IAAI,CAACG,KAAKO,IAAI,CAAC;YACrB,MAAMC,OAAOP,MAAMO,IAAI;YACvB,IAAIA,QAAQA,KAAKC,qBAAqB,KAAKjB,MAAMkB,KAAK,IAAIV,KAAKW,MAAM,GAAG,GAAG;gBACzER;gBACAH,KAAKY,GAAG;gBACRX,MAAMJ,IAAI,CAACG,KAAKO,IAAI,CAAC;gBACrBP,OAAO;oBAACK;iBAAK;gBACbJ,QAAQJ,KAAKK,MAAM,CAAkB,SAASL,IAAI,CAACQ,MAAMQ,IAAI,CAAC,MAAMrB,MAAMsB,UAAU,EAAED,IAAI,CAAC,KAAKrB,MAAMuB,CAAC;YACzG;QACF;QACA,qBAAqB;QACrBlB,KAAKgB,IAAI,CAAC,MAAM,CAACV,WAAWX,MAAMsB,UAAU;QAE5C,OAAO;YACLjB,KAAKmB,SAAS,CAAC,SAASC,MAAM;QAChC;IACF;IACA7B,OAAM8B,SAAS,CAACvB;IAEhB,MAAM,EAAEmB,UAAU,EAAE,GAAGK,MAAM,GAAG3B;IAEhC,OAAA,WAAA,GAAO,OAAA,aAAA,CAACK,QAAAA;QAAKuB,KAAK3B;QAAiB,OAAGH,yBAAAA,EAAe6B,KAAK;;AAC5D,EAAE"}
+{"version":3,"sources":["../src/components/LineChart/eventAnnotation/Textbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { select } from 'd3-selection';\nimport { getSecureProps } from '../../../utilities/utilities';\n\ninterface TextboxProps {\n  text: string;\n  width: number;\n  x: number;\n  y: number;\n  lineHeight: number;\n  textAnchor?: 'start' | 'middle' | 'end';\n  fontSize?: string;\n  fill?: string;\n}\n\nexport const Textbox: React.FunctionComponent<TextboxProps> = props => {\n  const textElementRef: React.RefObject<SVGTextElement> = React.useRef(null);\n\n  const wrapWords = () => {\n    if (!textElementRef.current) {\n      return;\n    }\n    const text = select(textElementRef.current);\n    const words = props.text.split(/\\s+/);\n    let line: string[] = [];\n    let tspan = text.append<SVGTSpanElement>('tspan');\n    let numLines = 0;\n\n    words.forEach(word => {\n      line.push(word);\n      tspan.text(line.join(' '));\n      const node = tspan.node();\n      if (node && node.getComputedTextLength() > props.width && line.length > 1) {\n        numLines++;\n        line.pop();\n        tspan.text(line.join(' '));\n        line = [word];\n        tspan = text.append<SVGTSpanElement>('tspan').text(word).attr('dy', props.lineHeight).attr('x', props.x);\n      }\n    });\n    // bottom aligns text\n    text.attr('dy', -numLines * props.lineHeight);\n\n    return () => {\n      text.selectAll('tspan').remove();\n    };\n  };\n  React.useEffect(wrapWords);\n\n  const { lineHeight, ...rest } = props;\n\n  return <text ref={textElementRef} {...getSecureProps(rest)} />;\n};\n"],"names":["React","select","getSecureProps","Textbox","props","textElementRef","useRef","wrapWords","current","text","words","split","line","tspan","append","numLines","forEach","word","push","join","node","getComputedTextLength","width","length","pop","attr","lineHeight","x","selectAll","remove","useEffect","rest","ref"],"mappings":"AAAA;;;;;+BAiBaG;;;;;;;iEAfU,QAAQ;6BACR,eAAe;2BACP,+BAA+B;AAavD,gBAAuDC,CAAAA;IAC5D,MAAMC,iBAAkDL,OAAMM,MAAM,CAAC;IAErE,MAAMC,YAAY;QAChB,IAAI,CAACF,eAAeG,OAAO,EAAE;YAC3B;QACF;QACA,MAAMC,WAAOR,mBAAAA,EAAOI,eAAeG,OAAO;QAC1C,MAAME,QAAQN,MAAMK,IAAI,CAACE,KAAK,CAAC;QAC/B,IAAIC,OAAiB,EAAE;QACvB,IAAIC,QAAQJ,KAAKK,MAAM,CAAkB;QACzC,IAAIC,WAAW;QAEfL,MAAMM,OAAO,CAACC,CAAAA;YACZL,KAAKM,IAAI,CAACD;YACVJ,MAAMJ,IAAI,CAACG,KAAKO,IAAI,CAAC;YACrB,MAAMC,OAAOP,MAAMO,IAAI;YACvB,IAAIA,QAAQA,KAAKC,qBAAqB,KAAKjB,MAAMkB,KAAK,IAAIV,KAAKW,MAAM,GAAG,GAAG;gBACzER;gBACAH,KAAKY,GAAG;gBACRX,MAAMJ,IAAI,CAACG,KAAKO,IAAI,CAAC;gBACrBP,OAAO;oBAACK;iBAAK;gBACbJ,QAAQJ,KAAKK,MAAM,CAAkB,SAASL,IAAI,CAACQ,MAAMQ,IAAI,CAAC,MAAMrB,MAAMsB,UAAU,EAAED,IAAI,CAAC,KAAKrB,MAAMuB,CAAC;YACzG;QACF;QACA,qBAAqB;QACrBlB,KAAKgB,IAAI,CAAC,MAAM,CAACV,WAAWX,MAAMsB,UAAU;QAE5C,OAAO;YACLjB,KAAKmB,SAAS,CAAC,SAASC,MAAM;QAChC;IACF;IACA7B,OAAM8B,SAAS,CAACvB;IAEhB,MAAM,EAAEmB,UAAU,EAAE,GAAGK,MAAM,GAAG3B;IAEhC,OAAA,WAAA,GAAO,OAAA,aAAA,CAACK,QAAAA;QAAKuB,KAAK3B;QAAiB,OAAGH,yBAAAA,EAAe6B,KAAK;;AAC5D,EAAE"}

package/lib-commonjs/components/LineChart/useLineChartStyles.styles.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -40,6 +41,10 @@ const linechartClassNames = {
  * Base Styles
  */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     tooltip: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi",
         mc9l5x: "f22iagw",
         Beiy3e4: "f1vx9l62",
         z8tnut: "f17mpqex",
@@ -55,24 +60,34 @@ const linechartClassNames = {
         qhf8xq: "f1euv43f",
         fsow6f: "f17mccla",
         Bhzewxz: "fr6rvge",
-        Bkfmm31: "f5q6cfr",
+        De3pzq: "fxugw4r",
         Beyfa6y: 0,
         Bbmb7ep: 0,
         Btl43ni: 0,
         B7oj6ja: 0,
         Dimara: "fq9zq91",
-        Bkecrkj: "f1aehjj5"
+        Bkecrkj: "f1aehjj5",
+        sj55zd: "f19n0e5"
+    },
+    markerLabel: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi",
+        Bkfmm31: "fhuob2q",
+        jzqdnp: "fdxigdc",
+        a6j6cd: "folz2wl"
     },
     lineBorder: {
         ojy3ng: "f1yuyku4",
         Bpvj6i6: "fdvt8h6"
-    },
-    markerLabel: {
-        Bkfmm31: "fhuob2q",
-        jzqdnp: "fdxigdc"
     }
 }, {
     d: [
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
         ".f22iagw{display:flex;}",
         ".f1vx9l62{flex-direction:column;}",
         ".f17mpqex{padding-top:var(--spacingHorizontalS);}",
@@ -82,7 +97,7 @@ const linechartClassNames = {
         ".f1euv43f{position:absolute;}",
         ".f17mccla{text-align:center;}",
         ".fr6rvge{top:var(--spacingVerticalNone);}",
-        ".f5q6cfr{fill:var(--colorNeutralBackground1);}",
+        ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
         [
             ".fq9zq91{border-radius:var(--borderRadiusSmall);}",
             {
@@ -90,11 +105,18 @@ const linechartClassNames = {
             }
         ],
         ".f1aehjj5{pointer-events:none;}",
-        ".f1yuyku4{stroke:var(--colorNeutralBackground1);}",
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
         ".fhuob2q{fill:var(--colorNeutralForeground1);}",
-        ".fdxigdc{text-anchor:middle;}"
+        ".fdxigdc{text-anchor:middle;}",
+        ".f1yuyku4{stroke:var(--colorNeutralBackground1);}"
     ],
     m: [
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.folz2wl{fill:CanvasText;}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
+        ],
         [
             "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.fdvt8h6{stroke:Canvas;}}",
             {

package/lib-commonjs/components/LineChart/useLineChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useLineChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n/**\n * @internal\n */ export const linechartClassNames = {\n    tooltip: 'fui-line__tooltip',\n    lineBorder: 'fui-line_lineBorder',\n    markerLabel: 'fui-line__markerLabel',\n    root: 'fui-line__root',\n    xAxis: 'fui-line__xAxis',\n    yAxis: 'fui-line__yAxis',\n    legendContainer: 'fui-line__legendContainer',\n    hover: 'fui-line__hover',\n    descriptionMessage: 'fui-line__descriptionMessage',\n    axisTitle: 'fui-line__axisTitle',\n    chartTitle: 'fui-line__chartTitle',\n    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n    shapeStyles: 'fui-line__shapeStyles',\n    chartWrapper: 'fui-line__chartWrapper',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    tooltip: {\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        position: 'absolute',\n        textAlign: 'center',\n        top: tokens.spacingVerticalNone,\n        fill: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none'\n    },\n    lineBorder: {\n        stroke: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            stroke: 'Canvas'\n        }\n    },\n    markerLabel: {\n        fill: tokens.colorNeutralForeground1,\n        textAnchor: 'middle',\n        selectors: {\n            [HighContrastSelector]: {\n                fill: 'CanvasText'\n            }\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useLineChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ ),\n        markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/ )\n    };\n};\n"],"names":["__styles","mergeClasses","shorthands","tokens","HighContrastSelector","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","ojy3ng","Bpvj6i6","jzqdnp","d","p","m","useLineChartStyles","props","baseStyles"],"mappings":";;;;;;;;;;;IAKiBK,mBAAmB;;;sBAmDD;eAAlByC;;;uBAxDoC,gBAAgB;AAK1D,4BAA4B;IACnCxC,OAAO,EAAE,mBAAmB;IAC5BC,UAAU,EAAE,qBAAqB;IACjCC,WAAW,EAAE,uBAAuB;IACpCC,IAAI,EAAE,gBAAgB;IACtBC,KAAK,EAAE,iBAAiB;IACxBC,KAAK,EAAE,iBAAiB;IACxBC,eAAe,EAAE,2BAA2B;IAC5CC,KAAK,EAAE,iBAAiB;IACxBC,kBAAkB,EAAE,8BAA8B;IAClDC,SAAS,EAAE,qBAAqB;IAChCC,UAAU,EAAE,sBAAsB;IAClCC,oBAAoB,EAAE,gCAAgC;IACtDC,WAAW,EAAE,uBAAuB;IACpCC,YAAY,EAAE,wBAAwB;IACtCC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE,EAAE;IACTC,cAAc,EAAE;AACpB,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGvB,eAAA,EAAA;IAAAM,OAAA,EAAA;QAAAkB,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAhC,UAAA,EAAA;QAAAiC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAjC,WAAA,EAAA;QAAAyB,OAAA,EAAA;QAAAS,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CA2BrB,CAAC;AAGS,4BAA4BE,KAAK,IAAG;IAC3C,MAAMC,UAAU,GAAGzB,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHjB,OAAO,MAAEL,mBAAY,EAACI,mBAAmB,CAACC,OAAO,EAAE0C,UAAU,CAAC1C,OAAO,CAAC,uBAAA,EAA0B,CAAC;QACjGC,UAAU,MAAEN,mBAAY,EAACI,mBAAmB,CAACE,UAAU,EAAEyC,UAAU,CAACzC,UAAU,CAAC,0BAAA,EAA6B,CAAC;QAC7GC,WAAW,MAAEP,mBAAY,EAACI,mBAAmB,CAACG,WAAW,EAAEwC,UAAU,CAACxC,WAAW,CAAC,2BAAA,EAA8B;IACpH,CAAC;AACL,CAAC"}
+{"version":3,"sources":["useLineChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';\n/**\n * @internal\n */ export const linechartClassNames = {\n    tooltip: 'fui-line__tooltip',\n    lineBorder: 'fui-line_lineBorder',\n    markerLabel: 'fui-line__markerLabel',\n    root: 'fui-line__root',\n    xAxis: 'fui-line__xAxis',\n    yAxis: 'fui-line__yAxis',\n    legendContainer: 'fui-line__legendContainer',\n    hover: 'fui-line__hover',\n    descriptionMessage: 'fui-line__descriptionMessage',\n    axisTitle: 'fui-line__axisTitle',\n    chartTitle: 'fui-line__chartTitle',\n    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n    shapeStyles: 'fui-line__shapeStyles',\n    chartWrapper: 'fui-line__chartWrapper',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    tooltip: getTooltipStyle(),\n    markerLabel: getMarkerLabelStyle(),\n    lineBorder: {\n        stroke: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            stroke: 'Canvas'\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useLineChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ ),\n        markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/ )\n    };\n};\n"],"names":["__styles","mergeClasses","tokens","HighContrastSelector","getMarkerLabelStyle","getTooltipStyle","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","Bkfmm31","jzqdnp","a6j6cd","ojy3ng","Bpvj6i6","d","p","m","useLineChartStyles","props","baseStyles"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAOKM,mBAAmB;;;sBAiCD;eAAlBgD;;;uBAvCwB,gBAAgB;AAM9C,4BAA4B;IACnC/C,OAAO,EAAE,mBAAmB;IAC5BC,UAAU,EAAE,qBAAqB;IACjCC,WAAW,EAAE,uBAAuB;IACpCC,IAAI,EAAE,gBAAgB;IACtBC,KAAK,EAAE,iBAAiB;IACxBC,KAAK,EAAE,iBAAiB;IACxBC,eAAe,EAAE,2BAA2B;IAC5CC,KAAK,EAAE,iBAAiB;IACxBC,kBAAkB,EAAE,8BAA8B;IAClDC,SAAS,EAAE,qBAAqB;IAChCC,UAAU,EAAE,sBAAsB;IAClCC,oBAAoB,EAAE,gCAAgC;IACtDC,WAAW,EAAE,uBAAuB;IACpCC,YAAY,EAAE,wBAAwB;IACtCC,UAAU,EAAE,EAAE;IACdC,KAAK,EAAE,EAAE;IACTC,cAAc,EAAE;AACpB,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGxB,eAAA,EAAA;IAAAO,OAAA,EAAA;QAAAkB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAApC,WAAA,EAAA;QAAAgB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAkB,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAxC,UAAA,EAAA;QAAAyC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CASrB,CAAC;AAGS,4BAA4BE,KAAK,IAAG;IAC3C,MAAMC,UAAU,GAAGhC,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHjB,OAAO,MAAEN,mBAAY,EAACK,mBAAmB,CAACC,OAAO,EAAEiD,UAAU,CAACjD,OAAO,CAAC,uBAAA,EAA0B,CAAC;QACjGC,UAAU,MAAEP,mBAAY,EAACK,mBAAmB,CAACE,UAAU,EAAEgD,UAAU,CAAChD,UAAU,CAAC,0BAAA,EAA6B,CAAC;QAC7GC,WAAW,MAAER,mBAAY,EAACK,mBAAmB,CAACG,WAAW,EAAE+C,UAAU,CAAC/C,WAAW,CAAC,2BAAA,EAA8B;IACpH,CAAC;AACL,CAAC"}

package/lib-commonjs/components/LineChart/useLineChartStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -41,31 +42,13 @@ const linechartClassNames = {
 /**
  * Base Styles
  */ const useStyles = (0, _react.makeStyles)({
-    tooltip: {
-        display: 'flex',
-        flexDirection: 'column',
-        ..._react.shorthands.padding(_reacttheme.tokens.spacingHorizontalS),
-        position: 'absolute',
-        textAlign: 'center',
-        top: _reacttheme.tokens.spacingVerticalNone,
-        fill: _reacttheme.tokens.colorNeutralBackground1,
-        borderRadius: _reacttheme.tokens.borderRadiusSmall,
-        pointerEvents: 'none'
-    },
+    tooltip: (0, _index.getTooltipStyle)(),
+    markerLabel: (0, _index.getMarkerLabelStyle)(),
     lineBorder: {
         stroke: _reacttheme.tokens.colorNeutralBackground1,
         [_index.HighContrastSelector]: {
             stroke: 'Canvas'
         }
-    },
-    markerLabel: {
-        fill: _reacttheme.tokens.colorNeutralForeground1,
-        textAnchor: 'middle',
-        selectors: {
-            [_index.HighContrastSelector]: {
-                fill: 'CanvasText'
-            }
-        }
     }
 });
 const useLineChartStyles = (props)=>{

package/lib-commonjs/components/LineChart/useLineChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/LineChart/useLineChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { LineChartProps, LineChartStyles } from './LineChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { HighContrastSelector } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const linechartClassNames: SlotClassNames<LineChartStyles> = {\n  tooltip: 'fui-line__tooltip',\n  lineBorder: 'fui-line_lineBorder',\n  markerLabel: 'fui-line__markerLabel',\n  root: 'fui-line__root',\n  xAxis: 'fui-line__xAxis',\n  yAxis: 'fui-line__yAxis',\n  legendContainer: 'fui-line__legendContainer',\n  hover: 'fui-line__hover',\n  descriptionMessage: 'fui-line__descriptionMessage',\n  axisTitle: 'fui-line__axisTitle',\n  chartTitle: 'fui-line__chartTitle',\n  opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n  shapeStyles: 'fui-line__shapeStyles',\n  chartWrapper: 'fui-line__chartWrapper',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  tooltip: {\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    position: 'absolute',\n    textAlign: 'center',\n    top: tokens.spacingVerticalNone,\n    fill: tokens.colorNeutralBackground1,\n    borderRadius: tokens.borderRadiusSmall,\n    pointerEvents: 'none',\n  },\n  lineBorder: {\n    stroke: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      stroke: 'Canvas',\n    },\n  },\n  markerLabel: {\n    fill: tokens.colorNeutralForeground1,\n    textAnchor: 'middle',\n    selectors: {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useLineChartStyles = (props: LineChartProps): LineChartStyles => {\n  const baseStyles = useStyles();\n  return {\n    tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/),\n    markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","HighContrastSelector","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","fill","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","stroke","colorNeutralForeground1","textAnchor","selectors","useLineChartStyles","props","baseStyles"],"mappings":";;;;;;;;;;;IASaK,mBAAAA;;;sBAuDAoC;;;;uBAhEwC,iBAAiB;4BAC/C,wBAAwB;uBAGV,wBAAwB;AAKtD,4BAA6D;IAClEnC,SAAS;IACTC,YAAY;IACZC,aAAa;IACbC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYvB,qBAAAA,EAAW;IAC3BM,SAAS;QACPkB,SAAS;QACTC,eAAe;QACf,GAAGvB,iBAAAA,CAAWwB,OAAO,CAACvB,kBAAAA,CAAOwB,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAK3B,kBAAAA,CAAO4B,mBAAmB;QAC/BC,MAAM7B,kBAAAA,CAAO8B,uBAAuB;QACpCC,cAAc/B,kBAAAA,CAAOgC,iBAAiB;QACtCC,eAAe;IACjB;IACA7B,YAAY;QACV8B,QAAQlC,kBAAAA,CAAO8B,uBAAuB;QACtC,CAAC7B,2BAAAA,CAAqB,EAAE;YACtBiC,QAAQ;QACV;IACF;IACA7B,aAAa;QACXwB,MAAM7B,kBAAAA,CAAOmC,uBAAuB;QACpCC,YAAY;QACZC,WAAW;YACT,CAACpC,2BAAAA,CAAqB,EAAE;gBACtB4B,MAAM;YACR;QACF;IACF;AACF;AAKO,MAAMS,qBAAqB,CAACC;IACjC,MAAMC,aAAapB;IACnB,OAAO;QACLjB,aAASL,mBAAAA,EAAaI,oBAAoBC,OAAO,EAAEqC,WAAWrC,OAAO,CAAC,uBAAuB;QAC7FC,gBAAYN,mBAAAA,EAAaI,oBAAoBE,UAAU,EAAEoC,WAAWpC,UAAU,CAAC,0BAA0B;QACzGC,iBAAaP,mBAAAA,EAAaI,oBAAoBG,WAAW,EAAEmC,WAAWnC,WAAW,CAAC,2BAA2B;IAC/G;AACF,EAAE"}
+{"version":3,"sources":["../src/components/LineChart/useLineChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { LineChartProps, LineChartStyles } from './LineChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const linechartClassNames: SlotClassNames<LineChartStyles> = {\n  tooltip: 'fui-line__tooltip',\n  lineBorder: 'fui-line_lineBorder',\n  markerLabel: 'fui-line__markerLabel',\n  root: 'fui-line__root',\n  xAxis: 'fui-line__xAxis',\n  yAxis: 'fui-line__yAxis',\n  legendContainer: 'fui-line__legendContainer',\n  hover: 'fui-line__hover',\n  descriptionMessage: 'fui-line__descriptionMessage',\n  axisTitle: 'fui-line__axisTitle',\n  chartTitle: 'fui-line__chartTitle',\n  opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n  shapeStyles: 'fui-line__shapeStyles',\n  chartWrapper: 'fui-line__chartWrapper',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  tooltip: getTooltipStyle() as GriffelStyle,\n  markerLabel: getMarkerLabelStyle() as GriffelStyle,\n  lineBorder: {\n    stroke: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      stroke: 'Canvas',\n    },\n  },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useLineChartStyles = (props: LineChartProps): LineChartStyles => {\n  const baseStyles = useStyles();\n  return {\n    tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/),\n    markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","HighContrastSelector","getMarkerLabelStyle","getTooltipStyle","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","stroke","colorNeutralBackground1","useLineChartStyles","props","baseStyles"],"mappings":"AAAA;;;;;;;;;;;;IAYaM,mBAAAA;;;IAqCAqB,kBAAAA;;;;uBA/C0C,iBAAiB;4BACjD,wBAAwB;uBAGV,wBAAwB;AAMtD,4BAA6D;IAClEpB,SAAS;IACTC,YAAY;IACZC,aAAa;IACbC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYxB,iBAAAA,EAAW;IAC3BO,aAASF,sBAAAA;IACTI,iBAAaL,0BAAAA;IACbI,YAAY;QACViB,QAAQvB,kBAAAA,CAAOwB,uBAAuB;QACtC,CAACvB,2BAAAA,CAAqB,EAAE;YACtBsB,QAAQ;QACV;IACF;AACF;AAKO,2BAA2B,CAACG;IACjC,MAAMC,aAAaL;IACnB,OAAO;QACLjB,aAASN,mBAAAA,EAAaK,oBAAoBC,OAAO,EAAEsB,WAAWtB,OAAO,CAAC,uBAAuB;QAC7FC,gBAAYP,mBAAAA,EAAaK,oBAAoBE,UAAU,EAAEqB,WAAWrB,UAAU,CAAC,0BAA0B;QACzGC,iBAAaR,mBAAAA,EAAaK,oBAAoBG,WAAW,EAAEoB,WAAWpB,WAAW,CAAC,2BAA2B;IAC/G;AACF,EAAE"}

package/lib-commonjs/components/ResponsiveContainer/ResponsiveContainer.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/ResponsiveContainer/ResponsiveContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ResponsiveContainer/ResponsiveContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getWindow } from '../../utilities/getWindow';\nimport { ResponsiveChildProps, ResponsiveContainerProps } from './ResponsiveContainer.types';\nimport { useResponsiveChildStyles } from './useResponsiveChildStyles.styles';\nimport { mergeClasses } from '@griffel/react';\n\n/**\n * Responsive Container component\n * {@docCategory ResponsiveContainer}\n */\nexport const ResponsiveContainer: React.FC<ResponsiveContainerProps> = props => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const onResizeRef = React.useRef<ResponsiveContainerProps['onResize']>();\n  const childClasses = useResponsiveChildStyles();\n\n  const [size, setSize] = React.useState<{ containerWidth?: number; containerHeight?: number }>({});\n\n  onResizeRef.current = props.onResize;\n\n  React.useEffect(() => {\n    const _window = getWindow(containerRef.current) as (Window & typeof globalThis) | undefined;\n    let animationFrameId: number | undefined;\n    let resizeObserver: ResizeObserver | undefined;\n\n    const resizeCallback = (entries: ResizeObserverEntry[]) => {\n      const { width: containerWidth, height: containerHeight } = entries[0].contentRect;\n      // rAF is an alternative to the throttle function. For more info, see:\n      // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf\n      animationFrameId = _window?.requestAnimationFrame(() => {\n        setSize(prevSize => {\n          const roundedWidth = Math.floor(containerWidth);\n          const roundedHeight = Math.floor(containerHeight);\n          if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {\n            return prevSize;\n          }\n\n          return { containerWidth: roundedWidth, containerHeight: roundedHeight };\n        });\n      });\n      onResizeRef.current?.(containerWidth, containerHeight);\n    };\n\n    if (_window && _window.ResizeObserver) {\n      resizeObserver = new _window.ResizeObserver(resizeCallback);\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n    }\n\n    return () => {\n      if (animationFrameId) {\n        _window?.cancelAnimationFrame(animationFrameId);\n      }\n\n      resizeObserver?.disconnect();\n    };\n  }, []);\n\n  const chartContent = React.useMemo(() => {\n    let calculatedWidth = size.containerWidth;\n    let calculatedHeight = size.containerHeight;\n\n    if (typeof props.aspect === 'number' && props.aspect > 0) {\n      if (calculatedWidth) {\n        calculatedHeight = calculatedWidth / props.aspect;\n      } else if (calculatedHeight) {\n        calculatedWidth = calculatedHeight * props.aspect;\n      }\n\n      if (typeof props.maxHeight === 'number' && calculatedHeight && calculatedHeight > props.maxHeight) {\n        calculatedHeight = props.maxHeight;\n      }\n    }\n\n    return React.Children.map(props.children, child => {\n      return React.cloneElement<ResponsiveChildProps>(child, {\n        width: calculatedWidth,\n        height: calculatedHeight,\n        // For SankeyChart\n        shouldResize: (calculatedWidth ?? 0) + (calculatedHeight ?? 0),\n        styles: {\n          root: mergeClasses(child.props.styles?.root, childClasses.root),\n          chartWrapper: mergeClasses(child.props.styles?.chartWrapper, childClasses.chartWrapper),\n          chart: mergeClasses(child.props.styles?.chart, childClasses.chart),\n        },\n      });\n    });\n  }, [size, props.aspect, props.maxHeight, props.children]);\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        width: props.width ?? '100%',\n        height: props.height ?? '100%',\n        minWidth: props.minWidth,\n        minHeight: props.minHeight,\n        maxHeight: props.maxHeight,\n      }}\n    >\n      {chartContent}\n    </div>\n  );\n};\nResponsiveContainer.displayName = 'ResponsiveContainer';\n"],"names":["React","getWindow","useResponsiveChildStyles","mergeClasses","ResponsiveContainer","props","containerRef","useRef","onResizeRef","childClasses","size","setSize","useState","current","onResize","useEffect","_window","animationFrameId","resizeObserver","resizeCallback","entries","width","containerWidth","height","containerHeight","contentRect","requestAnimationFrame","prevSize","roundedWidth","Math","floor","roundedHeight","ResizeObserver","observe","cancelAnimationFrame","disconnect","chartContent","useMemo","calculatedWidth","calculatedHeight","aspect","maxHeight","Children","map","children","child","cloneElement","shouldResize","styles","root","chartWrapper","chart","div","ref","style","minWidth","minHeight","displayName"],"mappings":"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"}
+{"version":3,"sources":["../src/components/ResponsiveContainer/ResponsiveContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getWindow } from '../../utilities/getWindow';\nimport { ResponsiveChildProps, ResponsiveContainerProps } from './ResponsiveContainer.types';\nimport { useResponsiveChildStyles } from './useResponsiveChildStyles.styles';\nimport { mergeClasses } from '@griffel/react';\n\n/**\n * Responsive Container component\n * {@docCategory ResponsiveContainer}\n */\nexport const ResponsiveContainer: React.FC<ResponsiveContainerProps> = props => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const onResizeRef = React.useRef<ResponsiveContainerProps['onResize']>();\n  const childClasses = useResponsiveChildStyles();\n\n  const [size, setSize] = React.useState<{ containerWidth?: number; containerHeight?: number }>({});\n\n  onResizeRef.current = props.onResize;\n\n  React.useEffect(() => {\n    const _window = getWindow(containerRef.current) as (Window & typeof globalThis) | undefined;\n    let animationFrameId: number | undefined;\n    let resizeObserver: ResizeObserver | undefined;\n\n    const resizeCallback = (entries: ResizeObserverEntry[]) => {\n      const { width: containerWidth, height: containerHeight } = entries[0].contentRect;\n      // rAF is an alternative to the throttle function. For more info, see:\n      // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf\n      animationFrameId = _window?.requestAnimationFrame(() => {\n        setSize(prevSize => {\n          const roundedWidth = Math.floor(containerWidth);\n          const roundedHeight = Math.floor(containerHeight);\n          if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {\n            return prevSize;\n          }\n\n          return { containerWidth: roundedWidth, containerHeight: roundedHeight };\n        });\n      });\n      onResizeRef.current?.(containerWidth, containerHeight);\n    };\n\n    if (_window && _window.ResizeObserver) {\n      resizeObserver = new _window.ResizeObserver(resizeCallback);\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n    }\n\n    return () => {\n      if (animationFrameId) {\n        _window?.cancelAnimationFrame(animationFrameId);\n      }\n\n      resizeObserver?.disconnect();\n    };\n  }, []);\n\n  const chartContent = React.useMemo(() => {\n    let calculatedWidth = size.containerWidth;\n    let calculatedHeight = size.containerHeight;\n\n    if (typeof props.aspect === 'number' && props.aspect > 0) {\n      if (calculatedWidth) {\n        calculatedHeight = calculatedWidth / props.aspect;\n      } else if (calculatedHeight) {\n        calculatedWidth = calculatedHeight * props.aspect;\n      }\n\n      if (typeof props.maxHeight === 'number' && calculatedHeight && calculatedHeight > props.maxHeight) {\n        calculatedHeight = props.maxHeight;\n      }\n    }\n\n    return React.Children.map(props.children, child => {\n      return React.cloneElement<ResponsiveChildProps>(child, {\n        width: calculatedWidth,\n        height: calculatedHeight,\n        // For SankeyChart\n        shouldResize: (calculatedWidth ?? 0) + (calculatedHeight ?? 0),\n        styles: {\n          root: mergeClasses(child.props.styles?.root, childClasses.root),\n          chartWrapper: mergeClasses(child.props.styles?.chartWrapper, childClasses.chartWrapper),\n          chart: mergeClasses(child.props.styles?.chart, childClasses.chart),\n        },\n      });\n    });\n  }, [size, props.aspect, props.maxHeight, props.children]);\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        width: props.width ?? '100%',\n        height: props.height ?? '100%',\n        minWidth: props.minWidth,\n        minHeight: props.minHeight,\n        maxHeight: props.maxHeight,\n      }}\n    >\n      {chartContent}\n    </div>\n  );\n};\nResponsiveContainer.displayName = 'ResponsiveContainer';\n"],"names":["React","getWindow","useResponsiveChildStyles","mergeClasses","ResponsiveContainer","props","containerRef","useRef","onResizeRef","childClasses","size","setSize","useState","current","onResize","useEffect","_window","animationFrameId","resizeObserver","resizeCallback","entries","width","containerWidth","height","containerHeight","contentRect","requestAnimationFrame","prevSize","roundedWidth","Math","floor","roundedHeight","ResizeObserver","observe","cancelAnimationFrame","disconnect","chartContent","useMemo","calculatedWidth","calculatedHeight","aspect","maxHeight","Children","map","children","child","cloneElement","shouldResize","styles","root","chartWrapper","chart","div","ref","style","minWidth","minHeight","displayName"],"mappings":"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"}

package/lib-commonjs/components/ResponsiveContainer/useResponsiveChildStyles.styles.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/ResponsiveContainer/useResponsiveChildStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useResponsiveChildStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const responsiveChildClassNames = {\n    root: 'fui-charts-resp-child__root',\n    chartWrapper: 'fui-charts-resp-child__chartWrapper',\n    chart: 'fui-charts-resp-child__chart'\n};\nconst useStyles = makeStyles({\n    root: {\n        width: '100%',\n        height: '100%'\n    },\n    chartWrapper: {\n        width: '100%'\n    },\n    chart: {\n        // This overrides the pixel width of svg allowing it to resize properly within a flexbox or grid layout.\n        // Note: height is not set to 100% because that causes the charts to resize vertically in an infinite loop.\n        width: '100%'\n    }\n});\nexport const useResponsiveChildStyles = ()=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(responsiveChildClassNames.root, baseStyles.root),\n        chartWrapper: mergeClasses(responsiveChildClassNames.chartWrapper, baseStyles.chartWrapper),\n        chart: mergeClasses(responsiveChildClassNames.chart, baseStyles.chart)\n    };\n};\n"],"names":["__styles","mergeClasses","responsiveChildClassNames","root","chartWrapper","chart","useStyles","a9b677","Bqenvij","d","useResponsiveChildStyles","baseStyles"],"mappings":";;;;;;;;;;;IACaE,yBAAyB;;;4BAmBD;;;;uBApBI,gBAAgB;AAClD,kCAAkC;IACrCC,IAAI,EAAE,6BAA6B;IACnCC,YAAY,EAAE,qCAAqC;IACnDC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAI,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAJ,YAAA,EAAA;QAAAG,MAAA,EAAA;IAAA;IAAAF,KAAA,EAAA;QAAAE,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAajB,CAAC;AACK,MAAMC,2BAA2BA,CAAA,KAAI;IACxC,MAAMC,UAAU,GAAGL,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHH,IAAI,MAAEF,mBAAY,EAACC,yBAAyB,CAACC,IAAI,EAAEQ,UAAU,CAACR,IAAI,CAAC;QACnEC,YAAY,MAAEH,mBAAY,EAACC,yBAAyB,CAACE,YAAY,EAAEO,UAAU,CAACP,YAAY,CAAC;QAC3FC,KAAK,MAAEJ,mBAAY,EAACC,yBAAyB,CAACG,KAAK,EAAEM,UAAU,CAACN,KAAK;IACzE,CAAC;AACL,CAAC"}
+{"version":3,"sources":["useResponsiveChildStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const responsiveChildClassNames = {\n    root: 'fui-charts-resp-child__root',\n    chartWrapper: 'fui-charts-resp-child__chartWrapper',\n    chart: 'fui-charts-resp-child__chart'\n};\nconst useStyles = makeStyles({\n    root: {\n        width: '100%',\n        height: '100%'\n    },\n    chartWrapper: {\n        width: '100%'\n    },\n    chart: {\n        // This overrides the pixel width of svg allowing it to resize properly within a flexbox or grid layout.\n        // Note: height is not set to 100% because that causes the charts to resize vertically in an infinite loop.\n        width: '100%'\n    }\n});\nexport const useResponsiveChildStyles = ()=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(responsiveChildClassNames.root, baseStyles.root),\n        chartWrapper: mergeClasses(responsiveChildClassNames.chartWrapper, baseStyles.chartWrapper),\n        chart: mergeClasses(responsiveChildClassNames.chart, baseStyles.chart)\n    };\n};\n"],"names":["__styles","mergeClasses","responsiveChildClassNames","root","chartWrapper","chart","useStyles","a9b677","Bqenvij","d","useResponsiveChildStyles","baseStyles"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,yBAAyB;;;IAmBzBQ,wBAAwB;;;;uBApBI,gBAAgB;AAClD,kCAAkC;IACrCP,IAAI,EAAE,6BAA6B;IACnCC,YAAY,EAAE,qCAAqC;IACnDC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAI,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAJ,YAAA,EAAA;QAAAG,MAAA,EAAA;IAAA;IAAAF,KAAA,EAAA;QAAAE,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAajB,CAAC;AACK,iCAAiCC,CAAA,KAAI;IACxC,MAAMC,UAAU,GAAGL,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHH,IAAI,MAAEF,mBAAY,EAACC,yBAAyB,CAACC,IAAI,EAAEQ,UAAU,CAACR,IAAI,CAAC;QACnEC,YAAY,MAAEH,mBAAY,EAACC,yBAAyB,CAACE,YAAY,EAAEO,UAAU,CAACP,YAAY,CAAC;QAC3FC,KAAK,MAAEJ,mBAAY,EAACC,yBAAyB,CAACG,KAAK,EAAEM,UAAU,CAACN,KAAK;IACzE,CAAC;AACL,CAAC"}

package/lib-commonjs/components/ResponsiveContainer/useResponsiveChildStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/ResponsiveContainer/useResponsiveChildStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ResponsiveContainer/useResponsiveChildStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { ResponsiveChildStyles } from './ResponsiveContainer.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const responsiveChildClassNames: SlotClassNames<ResponsiveChildStyles> = {\n  root: 'fui-charts-resp-child__root',\n  chartWrapper: 'fui-charts-resp-child__chartWrapper',\n  chart: 'fui-charts-resp-child__chart',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n    height: '100%',\n  },\n  chartWrapper: {\n    width: '100%',\n  },\n  chart: {\n    // This overrides the pixel width of svg allowing it to resize properly within a flexbox or grid layout.\n    // Note: height is not set to 100% because that causes the charts to resize vertically in an infinite loop.\n    width: '100%',\n  },\n});\n\nexport const useResponsiveChildStyles = (): ResponsiveChildStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(responsiveChildClassNames.root, baseStyles.root),\n    chartWrapper: mergeClasses(responsiveChildClassNames.chartWrapper, baseStyles.chartWrapper),\n    chart: mergeClasses(responsiveChildClassNames.chart, baseStyles.chart),\n  };\n};\n"],"names":["makeStyles","mergeClasses","responsiveChildClassNames","root","chartWrapper","chart","useStyles","width","height","useResponsiveChildStyles","baseStyles"],"mappings":";;;;;;;;;;;IAIaE,yBAAAA;;;IAqBAO,wBAAAA;;;;uBAzB4B,iBAAiB;AAInD,kCAAyE;IAC9EN,MAAM;IACNC,cAAc;IACdC,OAAO;AACT,EAAE;AAEF,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BG,MAAM;QACJI,OAAO;QACPC,QAAQ;IACV;IACAJ,cAAc;QACZG,OAAO;IACT;IACAF,OAAO;QACL,wGAAwG;QACxG,2GAA2G;QAC3GE,OAAO;IACT;AACF;AAEO,iCAAiC;IACtC,MAAMG,aAAaJ;IAEnB,OAAO;QACLH,UAAMF,mBAAAA,EAAaC,0BAA0BC,IAAI,EAAEO,WAAWP,IAAI;QAClEC,kBAAcH,mBAAAA,EAAaC,0BAA0BE,YAAY,EAAEM,WAAWN,YAAY;QAC1FC,WAAOJ,mBAAAA,EAAaC,0BAA0BG,KAAK,EAAEK,WAAWL,KAAK;IACvE;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ResponsiveContainer/useResponsiveChildStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { ResponsiveChildStyles } from './ResponsiveContainer.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const responsiveChildClassNames: SlotClassNames<ResponsiveChildStyles> = {\n  root: 'fui-charts-resp-child__root',\n  chartWrapper: 'fui-charts-resp-child__chartWrapper',\n  chart: 'fui-charts-resp-child__chart',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n    height: '100%',\n  },\n  chartWrapper: {\n    width: '100%',\n  },\n  chart: {\n    // This overrides the pixel width of svg allowing it to resize properly within a flexbox or grid layout.\n    // Note: height is not set to 100% because that causes the charts to resize vertically in an infinite loop.\n    width: '100%',\n  },\n});\n\nexport const useResponsiveChildStyles = (): ResponsiveChildStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(responsiveChildClassNames.root, baseStyles.root),\n    chartWrapper: mergeClasses(responsiveChildClassNames.chartWrapper, baseStyles.chartWrapper),\n    chart: mergeClasses(responsiveChildClassNames.chart, baseStyles.chart),\n  };\n};\n"],"names":["makeStyles","mergeClasses","responsiveChildClassNames","root","chartWrapper","chart","useStyles","width","height","useResponsiveChildStyles","baseStyles"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,yBAAAA;;;4BAqBAO;eAAAA;;;uBAzB4B,iBAAiB;AAInD,kCAAyE;IAC9EN,MAAM;IACNC,cAAc;IACdC,OAAO;AACT,EAAE;AAEF,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BG,MAAM;QACJI,OAAO;QACPC,QAAQ;IACV;IACAJ,cAAc;QACZG,OAAO;IACT;IACAF,OAAO;QACL,wGAAwG;QACxG,2GAA2G;QAC3GE,OAAO;IACT;AACF;AAEO,iCAAiC;IACtC,MAAMG,aAAaJ;IAEnB,OAAO;QACLH,UAAMF,mBAAAA,EAAaC,0BAA0BC,IAAI,EAAEO,WAAWP,IAAI;QAClEC,kBAAcH,mBAAAA,EAAaC,0BAA0BE,YAAY,EAAEM,WAAWN,YAAY;QAC1FC,WAAOJ,mBAAAA,EAAaC,0BAA0BG,KAAK,EAAEK,WAAWL,KAAK;IACvE;AACF,EAAE"}

package/lib-commonjs/components/ResponsiveContainer/withResponsiveContainer.js

@@ -1,4 +1,5 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */ "use strict";
+'use client';
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

package/lib-commonjs/components/ResponsiveContainer/withResponsiveContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ResponsiveContainer/withResponsiveContainer.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from 'react';\nimport { ResponsiveContainer } from './ResponsiveContainer';\nimport { ResponsiveContainerProps } from './ResponsiveContainer.types';\n\n/**\n * An HOC to update wrapped component on container resize.\n * {@docCategory ResponsiveContainer}\n */\nexport function withResponsiveContainer<TProps extends Omit<ResponsiveContainerProps, 'children'>>(\n  WrappedComponent: React.ComponentType<TProps>,\n) {\n  const ComponentWithResponsiveContainer: React.FC<TProps> = ({\n    aspect,\n    width,\n    height,\n    minWidth,\n    minHeight,\n    maxHeight,\n    onResize,\n    ...restProps\n  }) => {\n    return (\n      <ResponsiveContainer\n        aspect={aspect}\n        width={width}\n        height={height}\n        minWidth={minWidth}\n        minHeight={minHeight}\n        maxHeight={maxHeight}\n        onResize={onResize}\n      >\n        <WrappedComponent {...(restProps as any)} />\n      </ResponsiveContainer>\n    );\n  };\n\n  return ComponentWithResponsiveContainer;\n}\n"],"names":["React","ResponsiveContainer","withResponsiveContainer","WrappedComponent","ComponentWithResponsiveContainer","aspect","width","height","minWidth","minHeight","maxHeight","onResize","restProps"],"mappings":"AAAA,qDAAqD,GACrD,YAAYA;;;;;;;;;;;iEAAW,QAAQ;qCACK,wBAAwB;AAOrD,SAASE,wBACdC,gBAA6C;IAE7C,MAAMC,mCAAqD,CAAC,EAC1DC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ;QACC,OAAA,WAAA,GACE,OAAA,aAAA,CAACX,wCAAAA,EAAAA;YACCI,QAAQA;YACRC,OAAOA;YACPC,QAAQA;YACRC,UAAUA;YACVC,WAAWA;YACXC,WAAWA;YACXC,UAAUA;yBAEV,OAAA,aAAA,CAACR,kBAAsBS;IAG7B;IAEA,OAAOR;AACT"}
+{"version":3,"sources":["../src/components/ResponsiveContainer/withResponsiveContainer.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport * as React from 'react';\nimport { ResponsiveContainer } from './ResponsiveContainer';\nimport { ResponsiveContainerProps } from './ResponsiveContainer.types';\n\n/**\n * An HOC to update wrapped component on container resize.\n * {@docCategory ResponsiveContainer}\n */\nexport function withResponsiveContainer<TProps extends Omit<ResponsiveContainerProps, 'children'>>(\n  WrappedComponent: React.ComponentType<TProps>,\n): React.FC<TProps> {\n  const ComponentWithResponsiveContainer: React.FC<TProps> = ({\n    aspect,\n    width,\n    height,\n    minWidth,\n    minHeight,\n    maxHeight,\n    onResize,\n    ...restProps\n  }) => {\n    return (\n      <ResponsiveContainer\n        aspect={aspect}\n        width={width}\n        height={height}\n        minWidth={minWidth}\n        minHeight={minHeight}\n        maxHeight={maxHeight}\n        onResize={onResize}\n      >\n        <WrappedComponent {...(restProps as any)} />\n      </ResponsiveContainer>\n    );\n  };\n\n  return ComponentWithResponsiveContainer;\n}\n"],"names":["React","ResponsiveContainer","withResponsiveContainer","WrappedComponent","ComponentWithResponsiveContainer","aspect","width","height","minWidth","minHeight","maxHeight","onResize","restProps"],"mappings":"AAAA;;;;;+BAWgBE;;;;;;;iEARO,QAAQ;qCACK,wBAAwB;AAOrD,iCACLC,gBAA6C;IAE7C,MAAMC,mCAAqD,CAAC,EAC1DC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACR,GAAGC,WACJ;QACC,OAAA,WAAA,GACE,OAAA,aAAA,CAACX,wCAAAA,EAAAA;YACCI,QAAQA;YACRC,OAAOA;YACPC,QAAQA;YACRC,UAAUA;YACVC,WAAWA;YACXC,WAAWA;YACXC,UAAUA;yBAEV,OAAA,aAAA,CAACR,kBAAsBS;IAG7B;IAEA,OAAOR;AACT"}

package/lib-commonjs/components/SankeyChart/SankeyChart.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true