@langchain/macaw-components 1.0.0-beta.0 → 1.0.0-beta.6
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/dist/_chunks/{LoadingIndicator-DgtU9aqD.js → LoadingIndicator-CDcArsiM.js} +13 -12
- package/dist/_chunks/LoadingIndicator-CDcArsiM.js.map +1 -0
- package/dist/_chunks/render-attachment-icon-BWBEMxXZ.js +270 -0
- package/dist/_chunks/render-attachment-icon-BWBEMxXZ.js.map +1 -0
- package/dist/catalog.json +527 -408
- package/dist/components/Attachment/Attachment.d.ts +21 -0
- package/dist/components/Attachment/Attachment.js +165 -0
- package/dist/components/Attachment/Attachment.js.map +1 -0
- package/dist/components/Attachment/AttachmentList.d.ts +5 -0
- package/dist/components/Attachment/AttachmentList.js +32 -0
- package/dist/components/Attachment/AttachmentList.js.map +1 -0
- package/dist/components/Attachment/index.d.ts +4 -0
- package/dist/components/Attachment/index.js +3 -0
- package/dist/components/Attachment/render-attachment-icon.d.ts +3 -0
- package/dist/components/Attachment/render-attachment-icon.js +2 -0
- package/dist/components/Avatar/Avatar.js +2 -2
- package/dist/components/Badge/Badge.d.ts +2 -0
- package/dist/components/Badge/Badge.js +12 -1
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/Banner/Banner.js +1 -1
- package/dist/components/Button/Button.js +1 -1
- package/dist/components/Button/constants.js +2 -2
- package/dist/components/Button/constants.js.map +1 -1
- package/dist/components/ChartCard/ChartCard.d.ts +1 -4
- package/dist/components/ChartCard/ChartCard.js +2 -2
- package/dist/components/ChartCard/ChartCard.js.map +1 -1
- package/dist/components/ChartCard/ChartCardSkeleton.d.ts +1 -1
- package/dist/components/ChartCard/ChartCardSkeleton.js +37 -0
- package/dist/components/ChartCard/ChartCardSkeleton.js.map +1 -1
- package/dist/components/ChartLegend/ChartLegend.js +2 -2
- package/dist/components/ChartLegend/ChartLegendItemRenderer.js +2 -2
- package/dist/components/ChartLegend/ChartLegendItemRenderer.js.map +1 -1
- package/dist/components/Code/Code.utils.d.ts +3 -2
- package/dist/components/Code/Code.utils.js +7 -3
- package/dist/components/Code/Code.utils.js.map +1 -1
- package/dist/components/Code/CodeLanguageSelect.d.ts +7 -0
- package/dist/components/Code/CodeLanguageSelect.js +29 -0
- package/dist/components/Code/CodeLanguageSelect.js.map +1 -0
- package/dist/components/Code/CodeLite.js +3 -0
- package/dist/components/Code/CodeLite.js.map +1 -1
- package/dist/components/Code/CodeToolbar.d.ts +7 -0
- package/dist/components/Code/CodeToolbar.js +19 -0
- package/dist/components/Code/CodeToolbar.js.map +1 -0
- package/dist/components/Code/codeLanguages.d.ts +7 -0
- package/dist/components/Code/codeLanguages.js +59 -0
- package/dist/components/Code/codeLanguages.js.map +1 -0
- package/dist/components/Code/index.d.ts +15 -2
- package/dist/components/Code/index.js +70 -50
- package/dist/components/Code/index.js.map +1 -1
- package/dist/components/Code/types.d.ts +1 -1
- package/dist/components/Command/Command.d.ts +10 -13
- package/dist/components/Command/Command.js +7 -2
- package/dist/components/Command/Command.js.map +1 -1
- package/dist/components/Command/CommandMenu.d.ts +7 -1
- package/dist/components/Command/CommandMenu.js +17 -9
- package/dist/components/Command/CommandMenu.js.map +1 -1
- package/dist/components/ContextMenu/ContextMenu.d.ts +6 -0
- package/dist/components/ContextMenu/ContextMenu.js +3 -2
- package/dist/components/ContextMenu/ContextMenu.js.map +1 -1
- package/dist/components/CopyButton/CopyButton.js +2 -2
- package/dist/components/Dialog/index.js +2 -2
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +11 -0
- package/dist/components/DropdownMenu/DropdownMenu.js +5 -4
- package/dist/components/DropdownMenu/DropdownMenu.js.map +1 -1
- package/dist/components/ErrorMessage/ErrorMessage.js +1 -1
- package/dist/components/GroupedTabs/GroupedTabs.d.ts +5 -2
- package/dist/components/GroupedTabs/GroupedTabs.js +33 -26
- package/dist/components/GroupedTabs/GroupedTabs.js.map +1 -1
- package/dist/components/IconButton/IconButton.js +2 -2
- package/dist/components/Input/Input.js +1 -1
- package/dist/components/LineChart/LineChart.d.ts +2 -2
- package/dist/components/LineChart/LineChart.js +3 -1
- package/dist/components/LineChart/LineChart.js.map +1 -1
- package/dist/components/LineChart/LineChart.types.d.ts +16 -0
- package/dist/components/LineChart/LineChartPlot.d.ts +3 -2
- package/dist/components/LineChart/LineChartPlot.js +8 -1
- package/dist/components/LineChart/LineChartPlot.js.map +1 -1
- package/dist/components/LineChart/LineChartVerticalMarkers.d.ts +8 -0
- package/dist/components/LineChart/LineChartVerticalMarkers.js +47 -0
- package/dist/components/LineChart/LineChartVerticalMarkers.js.map +1 -0
- package/dist/components/LineChart/index.d.ts +1 -1
- package/dist/components/Logo/index.js +11 -6
- package/dist/components/Logo/index.js.map +1 -1
- package/dist/components/MetricChart/MetricChart.d.ts +2 -0
- package/dist/components/MetricChart/MetricChart.js +15 -4
- package/dist/components/MetricChart/MetricChart.js.map +1 -1
- package/dist/components/MetricChart/formatters.js +15 -2
- package/dist/components/MetricChart/formatters.js.map +1 -1
- package/dist/components/MetricChart/index.d.ts +1 -1
- package/dist/components/Pane/Pane.js +2 -2
- package/dist/components/SankeyChart/AnimatedSankeyLink.d.ts +17 -0
- package/dist/components/SankeyChart/AnimatedSankeyLink.js +44 -0
- package/dist/components/SankeyChart/AnimatedSankeyLink.js.map +1 -0
- package/dist/components/SankeyChart/AnimatedSankeyNode.d.ts +16 -0
- package/dist/components/SankeyChart/AnimatedSankeyNode.js +42 -0
- package/dist/components/SankeyChart/AnimatedSankeyNode.js.map +1 -0
- package/dist/components/SankeyChart/SankeyChart.d.ts +42 -0
- package/dist/components/SankeyChart/SankeyChart.js +185 -0
- package/dist/components/SankeyChart/SankeyChart.js.map +1 -0
- package/dist/components/SankeyChart/SankeyChart.types.d.ts +90 -0
- package/dist/components/SankeyChart/SankeyChart.types.js +0 -0
- package/dist/components/SankeyChart/SankeyChart.utils.d.ts +21 -0
- package/dist/components/SankeyChart/SankeyChart.utils.js +299 -0
- package/dist/components/SankeyChart/SankeyChart.utils.js.map +1 -0
- package/dist/components/SankeyChart/SankeyNodeLabel.d.ts +10 -0
- package/dist/components/SankeyChart/SankeyNodeLabel.js +30 -0
- package/dist/components/SankeyChart/SankeyNodeLabel.js.map +1 -0
- package/dist/components/SankeyChart/SankeyNodeLabel.utils.d.ts +9 -0
- package/dist/components/SankeyChart/SankeyNodeLabel.utils.js +29 -0
- package/dist/components/SankeyChart/SankeyNodeLabel.utils.js.map +1 -0
- package/dist/components/SankeyChart/constants.d.ts +22 -0
- package/dist/components/SankeyChart/constants.js +27 -0
- package/dist/components/SankeyChart/constants.js.map +1 -0
- package/dist/components/SankeyChart/index.d.ts +5 -0
- package/dist/components/SankeyChart/index.js +4 -0
- package/dist/components/Select/Select.js +5 -5
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Select/SelectPrimitive.d.ts +6 -0
- package/dist/components/Select/SelectPrimitive.js +3 -2
- package/dist/components/Select/SelectPrimitive.js.map +1 -1
- package/dist/components/Slider/Slider.js +10 -3
- package/dist/components/Slider/Slider.js.map +1 -1
- package/dist/components/SplitViewPane/SplitViewPane.d.ts +2 -1
- package/dist/components/SplitViewPane/SplitViewPane.js +113 -219
- package/dist/components/SplitViewPane/SplitViewPane.js.map +1 -1
- package/dist/components/SplitViewPane/SplitViewPaneHeader.js +2 -2
- package/dist/components/SplitViewPane/useShowChildren.d.ts +5 -0
- package/dist/components/SplitViewPane/useShowChildren.js +14 -0
- package/dist/components/SplitViewPane/useShowChildren.js.map +1 -0
- package/dist/components/SplitViewPane/useSplitViewPaneResize.d.ts +21 -0
- package/dist/components/SplitViewPane/useSplitViewPaneResize.js +145 -0
- package/dist/components/SplitViewPane/useSplitViewPaneResize.js.map +1 -0
- package/dist/components/Textarea/Textarea.d.ts +4 -3
- package/dist/components/Textarea/Textarea.js +7 -21
- package/dist/components/Textarea/Textarea.js.map +1 -1
- package/dist/components/ThinkingState/LoadingIndicator.d.ts +1 -0
- package/dist/components/ThinkingState/LoadingIndicator.js +1 -1
- package/dist/components/ThinkingState/ThinkingState.d.ts +1 -0
- package/dist/components/ThinkingState/ThinkingState.js +5 -4
- package/dist/components/ThinkingState/ThinkingState.js.map +1 -1
- package/dist/components/ThinkingState/index.js +1 -1
- package/dist/components/Toast/index.js +33 -28
- package/dist/components/Toast/index.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.js +2 -2
- package/dist/components/Typeahead/Typeahead.js +18 -8
- package/dist/components/Typeahead/Typeahead.js.map +1 -1
- package/dist/components/Typeahead/Typeahead.types.d.ts +2 -0
- package/dist/components/Typeahead/TypeaheadParts.d.ts +3 -1
- package/dist/components/Typeahead/TypeaheadParts.js +7 -6
- package/dist/components/Typeahead/TypeaheadParts.js.map +1 -1
- package/dist/components/Typeahead/TypeaheadView.js +19 -13
- package/dist/components/Typeahead/TypeaheadView.js.map +1 -1
- package/dist/components/Typeahead/useTypeaheadDomSync.d.ts +1 -1
- package/dist/components/Typeahead/useTypeaheadDomSync.js +14 -8
- package/dist/components/Typeahead/useTypeaheadDomSync.js.map +1 -1
- package/dist/components/Typeahead/useTypeaheadUncontrolledInput.d.ts +2 -1
- package/dist/components/Typeahead/useTypeaheadUncontrolledInput.js +10 -9
- package/dist/components/Typeahead/useTypeaheadUncontrolledInput.js.map +1 -1
- package/dist/components/UnsavedChangesDialog.js +2 -2
- package/dist/components/index.d.ts +3 -1
- package/dist/components/index.js +7 -5
- package/dist/components.css +22 -18
- package/dist/hooks/useDebouncedCommit.d.ts +14 -0
- package/dist/hooks/useDebouncedCommit.js +35 -0
- package/dist/hooks/useDebouncedCommit.js.map +1 -0
- package/dist/icons/LongTailPhosphorIcons.js +1 -1
- package/dist/icons/PaddedPhosphorIcons.d.ts +1 -0
- package/dist/icons/PaddedPhosphorIcons.js +4 -2
- package/dist/icons/PaddedPhosphorIcons.js.map +1 -1
- package/dist/icons/WeightedPhosphorIcons.d.ts +1 -0
- package/dist/icons/WeightedPhosphorIcons.js +3 -1
- package/dist/icons/WeightedPhosphorIcons.js.map +1 -1
- package/dist/icons/index.js +3 -3
- package/dist/index.js +7 -5
- package/dist/utilities.css +1 -1
- package/dist/utils/chartColors.d.ts +2 -1
- package/dist/utils/chartColors.js +2 -1
- package/dist/utils/chartColors.js.map +1 -1
- package/dist/utils/componentSizes.d.ts +0 -1
- package/dist/utils/componentSizes.js.map +1 -1
- package/dist/utils/lazy-codemirror-loader.d.ts +0 -2
- package/dist/utils/lazy-codemirror-loader.js +1 -3
- package/dist/utils/lazy-codemirror-loader.js.map +1 -1
- package/docs/DESIGN.md +17 -0
- package/docs/STYLES.md +4 -1
- package/package.json +21 -8
- package/dist/_chunks/LoadingIndicator-DgtU9aqD.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LineChartPlot.js","names":[],"sources":["../../../src/components/LineChart/LineChartPlot.tsx"],"sourcesContent":["import { useId, useRef, type AriaAttributes, type PointerEvent } from 'react';\n\nimport { animated, useReducedMotion, useSpring } from '@react-spring/web';\nimport { AxisBottom, AxisLeft, AxisRight } from '@visx/axis';\nimport { curveLinear } from '@visx/curve';\nimport { GridColumns, GridRows } from '@visx/grid';\nimport { Group } from '@visx/group';\nimport type { scaleBand, scaleLinear } from '@visx/scale';\nimport { LinePath } from '@visx/shape';\n\nimport {\n getChartAxisLabelOffset,\n getSecondaryChartAxisOffset,\n} from '../../utils/chartAxisLayout';\nimport {\n CHART_DIMMED_OPACITY,\n CHART_DASHED_STROKE_DASHARRAY,\n CHART_TICK_FONT_SIZE,\n CHART_VALUE_AXIS_TICK_LENGTH,\n} from '../../utils/chartConstants';\nimport {\n getChartTickValues,\n getNearestChartValue,\n} from '../../utils/chartValues';\nimport { cn } from '../../utils/cn';\nimport { Tooltip } from '../Tooltip';\nimport { LINE_CHART_DEFAULT_TICK_COUNT } from './constants';\nimport type {\n LineChartDisplayAxis,\n LineChartDisplaySeries,\n LineChartInteractionDatum,\n LineChartSelectionRange,\n LineChartYBand,\n} from './LineChart.types';\nimport { getLineSegments, getSelectionBounds } from './LineChart.utils';\n\nconst defaultFormatValue = new Intl.NumberFormat('en-US', {\n maximumFractionDigits: 2,\n}).format;\n\nconst getInteractionDatum = (\n nearestX: number,\n series: readonly LineChartDisplaySeries[],\n xPosition: number,\n pointerX: number\n): LineChartInteractionDatum => ({\n x: nearestX,\n pointerX,\n xPosition,\n points: series.map((item) => ({\n seriesId: item.id,\n seriesLabel: item.label,\n color: item.color,\n value: item.points.find((point) => point.x === nearestX)?.y ?? null,\n })),\n});\n\ntype LineChartPlotProps = {\n width: number;\n height: number;\n innerWidth: number;\n innerHeight: number;\n chartMargin: { top: number; right: number; bottom: number; left: number };\n xScale:\n | ReturnType<typeof scaleLinear<number>>\n | ReturnType<typeof scaleBand<number>>;\n getXPosition: (value: number) => number;\n getXValue: (position: number) => number;\n getXRangePosition: (value: number) => number;\n uniqueXValues: readonly number[];\n axes: readonly LineChartDisplayAxis[];\n series: readonly LineChartDisplaySeries[];\n formatXValue: (value: number) => string;\n xTickCount?: number;\n xTickValues?: readonly number[];\n showPoints: boolean;\n connectNulls: boolean;\n showGridRows: boolean;\n showGridColumns: boolean;\n activeX?: number;\n activeLegendItemId?: string | null;\n selectionRange?: LineChartSelectionRange;\n yBands: readonly LineChartYBand[];\n shouldAnimate: boolean;\n isRendering: boolean;\n 'aria-describedby'?: AriaAttributes['aria-describedby'];\n 'aria-label': string;\n onDatumPointerDown?: (\n datum: LineChartInteractionDatum,\n event: PointerEvent<SVGSVGElement>\n ) => void;\n onDatumPointerMove?: (\n datum: LineChartInteractionDatum,\n event: PointerEvent<SVGSVGElement>\n ) => void;\n onDatumPointerOut?: () => void;\n onDatumPointerUp?: (\n datum: LineChartInteractionDatum,\n event: PointerEvent<SVGSVGElement>\n ) => void;\n};\n\nexport const LineChartPlot = ({\n width,\n height,\n innerWidth,\n innerHeight,\n chartMargin,\n xScale,\n getXPosition,\n getXValue,\n getXRangePosition,\n uniqueXValues,\n axes,\n series,\n formatXValue,\n xTickCount,\n xTickValues,\n showPoints,\n connectNulls,\n showGridRows,\n showGridColumns,\n activeX,\n activeLegendItemId,\n selectionRange,\n yBands,\n shouldAnimate,\n isRendering,\n onDatumPointerDown,\n onDatumPointerMove,\n onDatumPointerOut,\n onDatumPointerUp,\n ...ariaProps\n}: LineChartPlotProps) => {\n const activePointerId = useRef<number | null>(null);\n const clipPathId = `line-chart-${useId().replace(/:/g, '')}`;\n const revealClipPathId = `${clipPathId}-reveal`;\n const axisById = new Map(axes.map((axis) => [axis.id, axis]));\n const primaryAxis = axes[0];\n const hasPointerInteraction =\n onDatumPointerDown != null ||\n onDatumPointerMove != null ||\n onDatumPointerUp != null;\n const resolvedXTickCount = xTickCount ?? (width < 480 ? 3 : 5);\n const resolvedXTickValues =\n xTickValues == null\n ? getChartTickValues(uniqueXValues, resolvedXTickCount)\n : Array.from(xTickValues);\n const activeXPosition = activeX == null ? null : getXPosition(activeX);\n const hasActiveX =\n activeXPosition != null &&\n activeXPosition >= 0 &&\n activeXPosition <= innerWidth;\n const canRender = isRendering && innerWidth > 0 && innerHeight > 0;\n const isReducedMotion = (useReducedMotion() ?? false) || !shouldAnimate;\n const hasRenderedSeries = canRender && series.length > 0;\n const getSeriesOpacity = (item: LineChartDisplaySeries) =>\n item.opacity *\n (activeLegendItemId != null && activeLegendItemId !== item.id\n ? CHART_DIMMED_OPACITY\n : 1);\n const visibleSeriesKey = JSON.stringify(series.map((item) => item.id));\n const [animation] = useSpring(\n () => ({\n from: { progress: 0 },\n to: { progress: hasRenderedSeries ? 1 : 0 },\n reset: true,\n immediate: isReducedMotion,\n }),\n [visibleSeriesKey, hasRenderedSeries, isReducedMotion]\n );\n\n const getDatumFromPointer = (event: PointerEvent<SVGSVGElement>) => {\n if (uniqueXValues.length === 0 || innerWidth === 0) return null;\n const bounds = event.currentTarget.getBoundingClientRect();\n const rawX = event.clientX - bounds.left - chartMargin.left;\n // Keep an in-progress range selection at its endpoint through the gutter.\n const plotX =\n activePointerId.current === event.pointerId\n ? Math.max(0, Math.min(innerWidth, rawX))\n : rawX;\n const plotY = event.clientY - bounds.top - chartMargin.top;\n if (plotX < 0 || plotX > innerWidth || plotY < 0 || plotY > innerHeight)\n return null;\n const pointerX = getXValue(plotX);\n const nearestX = getNearestChartValue(uniqueXValues, plotX, getXPosition);\n if (nearestX == null) return null;\n return getInteractionDatum(\n nearestX,\n series,\n chartMargin.left + getXPosition(nearestX),\n pointerX\n );\n };\n\n const selectionStartX =\n selectionRange == null ? null : getXRangePosition(selectionRange.from);\n const selectionEndX =\n selectionRange == null ? null : getXRangePosition(selectionRange.to);\n const selectionBounds = getSelectionBounds(\n selectionStartX,\n selectionEndX,\n innerWidth\n );\n const handlePointerExit = () => {\n activePointerId.current = null;\n onDatumPointerOut?.();\n };\n const handlePointerMove = (event: PointerEvent<SVGSVGElement>) => {\n const datum = getDatumFromPointer(event);\n if (datum == null) handlePointerExit();\n else onDatumPointerMove?.(datum, event);\n };\n const handlePointerDown = (event: PointerEvent<SVGSVGElement>) => {\n const datum = getDatumFromPointer(event);\n if (datum == null || onDatumPointerDown == null) return;\n if (event.button === 0) activePointerId.current = event.pointerId;\n onDatumPointerDown(datum, event);\n };\n const handlePointerUp = (event: PointerEvent<SVGSVGElement>) => {\n const datum = getDatumFromPointer(event);\n if (datum == null) return handlePointerExit();\n activePointerId.current = null;\n onDatumPointerUp?.(datum, event);\n };\n\n return (\n <svg\n width={width}\n height={height}\n role=\"graphics-document group\"\n {...ariaProps}\n focusable=\"false\"\n className={cn(\n 'block size-full',\n hasPointerInteraction && 'cursor-crosshair'\n )}\n onPointerMove={handlePointerMove}\n onPointerDown={handlePointerDown}\n onPointerLeave={handlePointerExit}\n onPointerCancel={handlePointerExit}\n onPointerUp={handlePointerUp}\n >\n {canRender && (\n <Group left={chartMargin.left} top={chartMargin.top}>\n <defs>\n <clipPath id={clipPathId}>\n <rect width={innerWidth} height={innerHeight} />\n </clipPath>\n <clipPath id={revealClipPathId}>\n <animated.rect\n width={animation.progress.to(\n (progress) => progress * innerWidth\n )}\n height={innerHeight}\n />\n </clipPath>\n </defs>\n <g clipPath={`url(#${clipPathId})`}>\n {yBands.map((band) => {\n const axis =\n band.yAxisId == null ? primaryAxis : axisById.get(band.yAxisId);\n if (axis == null) return null;\n const domain = axis.scale.domain();\n const from = band.from ?? domain[0];\n const to = band.to ?? domain.at(-1);\n if (from == null || to == null) return null;\n const fromY = axis.scale(from);\n const toY = axis.scale(to);\n return (\n <rect\n key={band.id}\n width={innerWidth}\n height={Math.abs(toY - fromY)}\n y={Math.min(fromY, toY)}\n fill={band.color}\n fillOpacity={band.opacity ?? 0.12}\n />\n );\n })}\n </g>\n {showGridRows && primaryAxis != null && (\n <GridRows\n scale={primaryAxis.scale}\n width={innerWidth}\n numTicks={primaryAxis.tickCount ?? LINE_CHART_DEFAULT_TICK_COUNT}\n tickValues={\n primaryAxis.tickValues == null\n ? undefined\n : Array.from(primaryAxis.tickValues)\n }\n stroke=\"var(--border-subtle)\"\n strokeDasharray={CHART_DASHED_STROKE_DASHARRAY}\n />\n )}\n {showGridColumns && (\n <GridColumns\n scale={xScale}\n height={innerHeight}\n numTicks={resolvedXTickCount}\n tickValues={resolvedXTickValues}\n stroke=\"var(--border-subtle)\"\n strokeDasharray={CHART_DASHED_STROKE_DASHARRAY}\n />\n )}\n <AxisBottom\n scale={xScale}\n top={innerHeight}\n numTicks={resolvedXTickCount}\n tickValues={resolvedXTickValues}\n hideAxisLine\n hideTicks\n tickFormat={(value) => formatXValue(value.valueOf())}\n tickLabelProps={{\n fill: 'var(--text-tertiary)',\n fontSize: CHART_TICK_FONT_SIZE,\n textAnchor: 'middle',\n dy: '0.5em',\n }}\n />\n {axes.map((axis, index) => {\n const tickFormat = (value: { valueOf(): number }) =>\n (axis.formatValue ?? defaultFormatValue)(value.valueOf());\n const textAnchor: 'end' | 'start' = index === 0 ? 'end' : 'start';\n const tickValues =\n axis.tickValues == null ? undefined : Array.from(axis.tickValues);\n const axisProps = {\n scale: axis.scale,\n numTicks: axis.tickCount ?? LINE_CHART_DEFAULT_TICK_COUNT,\n tickValues,\n tickLength: CHART_VALUE_AXIS_TICK_LENGTH,\n hideAxisLine: true,\n hideTicks: true,\n tickFormat,\n tickLabelProps: {\n fill: 'var(--text-tertiary)',\n fontSize: CHART_TICK_FONT_SIZE,\n textAnchor,\n dx: index === 0 ? '-0.25em' : '0.25em',\n dy: '0.25em',\n },\n };\n return index === 0 ? (\n <AxisLeft key={axis.id} {...axisProps} />\n ) : (\n <AxisRight\n key={axis.id}\n {...axisProps}\n left={innerWidth + getSecondaryChartAxisOffset(axes, index)}\n />\n );\n })}\n <g clipPath={`url(#${clipPathId})`}>\n <g clipPath={`url(#${revealClipPathId})`}>\n {series.map((item) => {\n const axis = axisById.get(item.yAxisId);\n if (axis == null) return null;\n return (\n <g\n key={item.id}\n role=\"group\"\n aria-label={`${item['aria-label'] ?? item.id} series`}\n >\n {getLineSegments(item.points, connectNulls).map(\n (segment, index) => (\n <LinePath\n key={index}\n data={segment}\n curve={curveLinear}\n fill=\"none\"\n stroke={item.color}\n strokeWidth={item.strokeWidth}\n strokeDasharray={item.strokeDasharray}\n opacity={getSeriesOpacity(item)}\n className=\"transition-opacity duration-fast motion-reduce:transition-none\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n x={(point) => getXPosition(point.x)}\n y={(point) => axis.scale(point.y ?? 0)}\n />\n )\n )}\n </g>\n );\n })}\n {showPoints &&\n series.flatMap((item) => {\n const axis = axisById.get(item.yAxisId);\n if (axis == null) return [];\n return item.points.flatMap((point, pointIndex) =>\n point.y == null\n ? []\n : [\n <circle\n key={`${item.id}-${point.x}-${pointIndex}`}\n cx={getXPosition(point.x)}\n cy={axis.scale(point.y)}\n r={2.5}\n fill={item.color}\n opacity={getSeriesOpacity(item)}\n className=\"transition-opacity duration-fast motion-reduce:transition-none\"\n />,\n ]\n );\n })}\n </g>\n {selectionBounds != null && (\n <g\n role=\"group\"\n aria-label={`Selected range from ${formatXValue(\n Math.min(selectionRange?.from ?? 0, selectionRange?.to ?? 0)\n )} to ${formatXValue(\n Math.max(selectionRange?.from ?? 0, selectionRange?.to ?? 0)\n )}`}\n >\n <rect\n aria-hidden=\"true\"\n x={selectionBounds.x}\n y={0}\n width={selectionBounds.width}\n height={innerHeight}\n fill=\"var(--bg-brand)\"\n fillOpacity={0.1}\n stroke=\"var(--border-brand)\"\n pointerEvents=\"none\"\n />\n </g>\n )}\n {hasActiveX && (\n <>\n <line\n x1={activeXPosition}\n x2={activeXPosition}\n y1={0}\n y2={innerHeight}\n stroke=\"currentColor\"\n strokeWidth={1}\n strokeDasharray={CHART_DASHED_STROKE_DASHARRAY}\n className=\"text-quaternary\"\n />\n {series.flatMap((item) => {\n if (!item.showActiveMarker) return [];\n const axis = axisById.get(item.yAxisId);\n const point = item.points.find(\n (candidate) => candidate.x === activeX\n );\n if (axis == null || point?.y == null) return [];\n return [\n <circle\n key={`active-${item.id}`}\n cx={activeXPosition}\n cy={axis.scale(point.y)}\n r={3}\n fill={item.color}\n opacity={getSeriesOpacity(item)}\n className=\"transition-opacity duration-fast motion-reduce:transition-none\"\n stroke=\"var(--bg-surface-level-1)\"\n strokeWidth={1.5}\n />,\n ];\n })}\n </>\n )}\n </g>\n {hasPointerInteraction && (\n <rect width={innerWidth} height={innerHeight} fill=\"transparent\" />\n )}\n </Group>\n )}\n {canRender &&\n axes.map((axis, index) => {\n if (axis.label == null) return null;\n const x =\n index === 0\n ? chartMargin.left - getChartAxisLabelOffset(axis.thickness)\n : chartMargin.left +\n innerWidth +\n getSecondaryChartAxisOffset(axes, index) +\n getChartAxisLabelOffset(axis.thickness);\n const y = chartMargin.top + innerHeight / 2;\n return (\n <Tooltip title={axis.label} key={axis.id}>\n <text\n x={x}\n y={y}\n fill=\"var(--text-quaternary)\"\n fontSize={CHART_TICK_FONT_SIZE}\n fontWeight={500}\n textAnchor=\"middle\"\n transform={`rotate(-90, ${x}, ${y})`}\n >\n {axis.label}\n </text>\n </Tooltip>\n );\n })}\n </svg>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"LineChartPlot.js","names":[],"sources":["../../../src/components/LineChart/LineChartPlot.tsx"],"sourcesContent":["import { useId, useRef, type AriaAttributes, type PointerEvent } from 'react';\n\nimport { animated, useReducedMotion, useSpring } from '@react-spring/web';\nimport { AxisBottom, AxisLeft, AxisRight } from '@visx/axis';\nimport { curveLinear } from '@visx/curve';\nimport { GridColumns, GridRows } from '@visx/grid';\nimport { Group } from '@visx/group';\nimport type { scaleBand, scaleLinear } from '@visx/scale';\nimport { LinePath } from '@visx/shape';\n\nimport {\n getChartAxisLabelOffset,\n getSecondaryChartAxisOffset,\n} from '../../utils/chartAxisLayout';\nimport {\n CHART_DIMMED_OPACITY,\n CHART_DASHED_STROKE_DASHARRAY,\n CHART_TICK_FONT_SIZE,\n CHART_VALUE_AXIS_TICK_LENGTH,\n} from '../../utils/chartConstants';\nimport {\n getChartTickValues,\n getNearestChartValue,\n} from '../../utils/chartValues';\nimport { cn } from '../../utils/cn';\nimport { Tooltip } from '../Tooltip';\nimport { LINE_CHART_DEFAULT_TICK_COUNT } from './constants';\nimport type {\n LineChartDisplayAxis,\n LineChartDisplaySeries,\n LineChartInteractionDatum,\n LineChartSelectionRange,\n LineChartVerticalMarker,\n LineChartYBand,\n} from './LineChart.types';\nimport { getLineSegments, getSelectionBounds } from './LineChart.utils';\nimport { LineChartVerticalMarkers } from './LineChartVerticalMarkers';\n\nconst defaultFormatValue = new Intl.NumberFormat('en-US', {\n maximumFractionDigits: 2,\n}).format;\n\nconst getInteractionDatum = (\n nearestX: number,\n series: readonly LineChartDisplaySeries[],\n xPosition: number,\n pointerX: number\n): LineChartInteractionDatum => ({\n x: nearestX,\n pointerX,\n xPosition,\n points: series.map((item) => ({\n seriesId: item.id,\n seriesLabel: item.label,\n color: item.color,\n value: item.points.find((point) => point.x === nearestX)?.y ?? null,\n })),\n});\n\ntype LineChartPlotProps = {\n width: number;\n height: number;\n innerWidth: number;\n innerHeight: number;\n chartMargin: { top: number; right: number; bottom: number; left: number };\n xScale:\n | ReturnType<typeof scaleLinear<number>>\n | ReturnType<typeof scaleBand<number>>;\n getXPosition: (value: number) => number;\n getXValue: (position: number) => number;\n getXRangePosition: (value: number) => number;\n uniqueXValues: readonly number[];\n axes: readonly LineChartDisplayAxis[];\n series: readonly LineChartDisplaySeries[];\n formatXValue: (value: number) => string;\n xTickCount?: number;\n xTickValues?: readonly number[];\n showPoints: boolean;\n connectNulls: boolean;\n showGridRows: boolean;\n showGridColumns: boolean;\n activeX?: number;\n activeLegendItemId?: string | null;\n selectionRange?: LineChartSelectionRange;\n yBands: readonly LineChartYBand[];\n verticalMarkers: readonly LineChartVerticalMarker[];\n shouldAnimate: boolean;\n isRendering: boolean;\n 'aria-describedby'?: AriaAttributes['aria-describedby'];\n 'aria-label': string;\n onDatumPointerDown?: (\n datum: LineChartInteractionDatum,\n event: PointerEvent<SVGSVGElement>\n ) => void;\n onDatumPointerMove?: (\n datum: LineChartInteractionDatum,\n event: PointerEvent<SVGSVGElement>\n ) => void;\n onDatumPointerOut?: () => void;\n onDatumPointerUp?: (\n datum: LineChartInteractionDatum,\n event: PointerEvent<SVGSVGElement>\n ) => void;\n};\n\nexport const LineChartPlot = ({\n width,\n height,\n innerWidth,\n innerHeight,\n chartMargin,\n xScale,\n getXPosition,\n getXValue,\n getXRangePosition,\n uniqueXValues,\n axes,\n series,\n formatXValue,\n xTickCount,\n xTickValues,\n showPoints,\n connectNulls,\n showGridRows,\n showGridColumns,\n activeX,\n activeLegendItemId,\n selectionRange,\n yBands,\n verticalMarkers,\n shouldAnimate,\n isRendering,\n onDatumPointerDown,\n onDatumPointerMove,\n onDatumPointerOut,\n onDatumPointerUp,\n ...ariaProps\n}: LineChartPlotProps) => {\n const activePointerId = useRef<number | null>(null);\n const clipPathId = `line-chart-${useId().replace(/:/g, '')}`;\n const revealClipPathId = `${clipPathId}-reveal`;\n const axisById = new Map(axes.map((axis) => [axis.id, axis]));\n const primaryAxis = axes[0];\n const hasPointerInteraction =\n onDatumPointerDown != null ||\n onDatumPointerMove != null ||\n onDatumPointerUp != null;\n const resolvedXTickCount = xTickCount ?? (width < 480 ? 3 : 5);\n const resolvedXTickValues =\n xTickValues == null\n ? getChartTickValues(uniqueXValues, resolvedXTickCount)\n : Array.from(xTickValues);\n const activeXPosition = activeX == null ? null : getXPosition(activeX);\n const hasActiveX =\n activeXPosition != null &&\n activeXPosition >= 0 &&\n activeXPosition <= innerWidth;\n const canRender = isRendering && innerWidth > 0 && innerHeight > 0;\n const isReducedMotion = (useReducedMotion() ?? false) || !shouldAnimate;\n const hasRenderedSeries = canRender && series.length > 0;\n const getSeriesOpacity = (item: LineChartDisplaySeries) =>\n item.opacity *\n (activeLegendItemId != null && activeLegendItemId !== item.id\n ? CHART_DIMMED_OPACITY\n : 1);\n const visibleSeriesKey = JSON.stringify(series.map((item) => item.id));\n const [animation] = useSpring(\n () => ({\n from: { progress: 0 },\n to: { progress: hasRenderedSeries ? 1 : 0 },\n reset: true,\n immediate: isReducedMotion,\n }),\n [visibleSeriesKey, hasRenderedSeries, isReducedMotion]\n );\n\n const getDatumFromPointer = (event: PointerEvent<SVGSVGElement>) => {\n if (uniqueXValues.length === 0 || innerWidth === 0) return null;\n const bounds = event.currentTarget.getBoundingClientRect();\n const rawX = event.clientX - bounds.left - chartMargin.left;\n // Keep an in-progress range selection at its endpoint through the gutter.\n const plotX =\n activePointerId.current === event.pointerId\n ? Math.max(0, Math.min(innerWidth, rawX))\n : rawX;\n const plotY = event.clientY - bounds.top - chartMargin.top;\n if (plotX < 0 || plotX > innerWidth || plotY < 0 || plotY > innerHeight)\n return null;\n const pointerX = getXValue(plotX);\n const nearestX = getNearestChartValue(uniqueXValues, plotX, getXPosition);\n if (nearestX == null) return null;\n return getInteractionDatum(\n nearestX,\n series,\n chartMargin.left + getXPosition(nearestX),\n pointerX\n );\n };\n\n const selectionStartX =\n selectionRange == null ? null : getXRangePosition(selectionRange.from);\n const selectionEndX =\n selectionRange == null ? null : getXRangePosition(selectionRange.to);\n const selectionBounds = getSelectionBounds(\n selectionStartX,\n selectionEndX,\n innerWidth\n );\n const handlePointerExit = () => {\n activePointerId.current = null;\n onDatumPointerOut?.();\n };\n const handlePointerMove = (event: PointerEvent<SVGSVGElement>) => {\n const datum = getDatumFromPointer(event);\n if (datum == null) handlePointerExit();\n else onDatumPointerMove?.(datum, event);\n };\n const handlePointerDown = (event: PointerEvent<SVGSVGElement>) => {\n const datum = getDatumFromPointer(event);\n if (datum == null || onDatumPointerDown == null) return;\n if (event.button === 0) activePointerId.current = event.pointerId;\n onDatumPointerDown(datum, event);\n };\n const handlePointerUp = (event: PointerEvent<SVGSVGElement>) => {\n const datum = getDatumFromPointer(event);\n if (datum == null) return handlePointerExit();\n activePointerId.current = null;\n onDatumPointerUp?.(datum, event);\n };\n\n return (\n <svg\n width={width}\n height={height}\n role=\"graphics-document group\"\n {...ariaProps}\n focusable=\"false\"\n className={cn(\n 'block size-full',\n hasPointerInteraction && 'cursor-crosshair'\n )}\n onPointerMove={handlePointerMove}\n onPointerDown={handlePointerDown}\n onPointerLeave={handlePointerExit}\n onPointerCancel={handlePointerExit}\n onPointerUp={handlePointerUp}\n >\n {canRender && (\n <Group left={chartMargin.left} top={chartMargin.top}>\n <defs>\n <clipPath id={clipPathId}>\n <rect width={innerWidth} height={innerHeight} />\n </clipPath>\n <clipPath id={revealClipPathId}>\n <animated.rect\n width={animation.progress.to(\n (progress) => progress * innerWidth\n )}\n height={innerHeight}\n />\n </clipPath>\n </defs>\n <g clipPath={`url(#${clipPathId})`}>\n {yBands.map((band) => {\n const axis =\n band.yAxisId == null ? primaryAxis : axisById.get(band.yAxisId);\n if (axis == null) return null;\n const domain = axis.scale.domain();\n const from = band.from ?? domain[0];\n const to = band.to ?? domain.at(-1);\n if (from == null || to == null) return null;\n const fromY = axis.scale(from);\n const toY = axis.scale(to);\n return (\n <rect\n key={band.id}\n width={innerWidth}\n height={Math.abs(toY - fromY)}\n y={Math.min(fromY, toY)}\n fill={band.color}\n fillOpacity={band.opacity ?? 0.12}\n />\n );\n })}\n </g>\n {showGridRows && primaryAxis != null && (\n <GridRows\n scale={primaryAxis.scale}\n width={innerWidth}\n numTicks={primaryAxis.tickCount ?? LINE_CHART_DEFAULT_TICK_COUNT}\n tickValues={\n primaryAxis.tickValues == null\n ? undefined\n : Array.from(primaryAxis.tickValues)\n }\n stroke=\"var(--border-subtle)\"\n strokeDasharray={CHART_DASHED_STROKE_DASHARRAY}\n />\n )}\n {showGridColumns && (\n <GridColumns\n scale={xScale}\n height={innerHeight}\n numTicks={resolvedXTickCount}\n tickValues={resolvedXTickValues}\n stroke=\"var(--border-subtle)\"\n strokeDasharray={CHART_DASHED_STROKE_DASHARRAY}\n />\n )}\n <LineChartVerticalMarkers\n verticalMarkers={verticalMarkers}\n innerWidth={innerWidth}\n innerHeight={innerHeight}\n getXPosition={getXPosition}\n />\n <AxisBottom\n scale={xScale}\n top={innerHeight}\n numTicks={resolvedXTickCount}\n tickValues={resolvedXTickValues}\n hideAxisLine\n hideTicks\n tickFormat={(value) => formatXValue(value.valueOf())}\n tickLabelProps={{\n fill: 'var(--text-tertiary)',\n fontSize: CHART_TICK_FONT_SIZE,\n textAnchor: 'middle',\n dy: '0.5em',\n }}\n />\n {axes.map((axis, index) => {\n const tickFormat = (value: { valueOf(): number }) =>\n (axis.formatValue ?? defaultFormatValue)(value.valueOf());\n const textAnchor: 'end' | 'start' = index === 0 ? 'end' : 'start';\n const tickValues =\n axis.tickValues == null ? undefined : Array.from(axis.tickValues);\n const axisProps = {\n scale: axis.scale,\n numTicks: axis.tickCount ?? LINE_CHART_DEFAULT_TICK_COUNT,\n tickValues,\n tickLength: CHART_VALUE_AXIS_TICK_LENGTH,\n hideAxisLine: true,\n hideTicks: true,\n tickFormat,\n tickLabelProps: {\n fill: 'var(--text-tertiary)',\n fontSize: CHART_TICK_FONT_SIZE,\n textAnchor,\n dx: index === 0 ? '-0.25em' : '0.25em',\n dy: '0.25em',\n },\n };\n return index === 0 ? (\n <AxisLeft key={axis.id} {...axisProps} />\n ) : (\n <AxisRight\n key={axis.id}\n {...axisProps}\n left={innerWidth + getSecondaryChartAxisOffset(axes, index)}\n />\n );\n })}\n <g clipPath={`url(#${clipPathId})`}>\n <g clipPath={`url(#${revealClipPathId})`}>\n {series.map((item) => {\n const axis = axisById.get(item.yAxisId);\n if (axis == null) return null;\n return (\n <g\n key={item.id}\n role=\"group\"\n aria-label={`${item['aria-label'] ?? item.id} series`}\n >\n {getLineSegments(item.points, connectNulls).map(\n (segment, index) => (\n <LinePath\n key={index}\n data={segment}\n curve={curveLinear}\n fill=\"none\"\n stroke={item.color}\n strokeWidth={item.strokeWidth}\n strokeDasharray={item.strokeDasharray}\n opacity={getSeriesOpacity(item)}\n className=\"transition-opacity duration-fast motion-reduce:transition-none\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n x={(point) => getXPosition(point.x)}\n y={(point) => axis.scale(point.y ?? 0)}\n />\n )\n )}\n </g>\n );\n })}\n {showPoints &&\n series.flatMap((item) => {\n const axis = axisById.get(item.yAxisId);\n if (axis == null) return [];\n return item.points.flatMap((point, pointIndex) =>\n point.y == null\n ? []\n : [\n <circle\n key={`${item.id}-${point.x}-${pointIndex}`}\n cx={getXPosition(point.x)}\n cy={axis.scale(point.y)}\n r={2.5}\n fill={item.color}\n opacity={getSeriesOpacity(item)}\n className=\"transition-opacity duration-fast motion-reduce:transition-none\"\n />,\n ]\n );\n })}\n </g>\n {selectionBounds != null && (\n <g\n role=\"group\"\n aria-label={`Selected range from ${formatXValue(\n Math.min(selectionRange?.from ?? 0, selectionRange?.to ?? 0)\n )} to ${formatXValue(\n Math.max(selectionRange?.from ?? 0, selectionRange?.to ?? 0)\n )}`}\n >\n <rect\n aria-hidden=\"true\"\n x={selectionBounds.x}\n y={0}\n width={selectionBounds.width}\n height={innerHeight}\n fill=\"var(--bg-brand)\"\n fillOpacity={0.1}\n stroke=\"var(--border-brand)\"\n pointerEvents=\"none\"\n />\n </g>\n )}\n {hasActiveX && (\n <>\n <line\n x1={activeXPosition}\n x2={activeXPosition}\n y1={0}\n y2={innerHeight}\n stroke=\"currentColor\"\n strokeWidth={1}\n strokeDasharray={CHART_DASHED_STROKE_DASHARRAY}\n className=\"text-quaternary\"\n />\n {series.flatMap((item) => {\n if (!item.showActiveMarker) return [];\n const axis = axisById.get(item.yAxisId);\n const point = item.points.find(\n (candidate) => candidate.x === activeX\n );\n if (axis == null || point?.y == null) return [];\n return [\n <circle\n key={`active-${item.id}`}\n cx={activeXPosition}\n cy={axis.scale(point.y)}\n r={3}\n fill={item.color}\n opacity={getSeriesOpacity(item)}\n className=\"transition-opacity duration-fast motion-reduce:transition-none\"\n stroke=\"var(--bg-surface-level-1)\"\n strokeWidth={1.5}\n />,\n ];\n })}\n </>\n )}\n </g>\n {hasPointerInteraction && (\n <rect width={innerWidth} height={innerHeight} fill=\"transparent\" />\n )}\n </Group>\n )}\n {canRender &&\n axes.map((axis, index) => {\n if (axis.label == null) return null;\n const x =\n index === 0\n ? chartMargin.left - getChartAxisLabelOffset(axis.thickness)\n : chartMargin.left +\n innerWidth +\n getSecondaryChartAxisOffset(axes, index) +\n getChartAxisLabelOffset(axis.thickness);\n const y = chartMargin.top + innerHeight / 2;\n return (\n <Tooltip title={axis.label} key={axis.id}>\n <text\n x={x}\n y={y}\n fill=\"var(--text-quaternary)\"\n fontSize={CHART_TICK_FONT_SIZE}\n fontWeight={500}\n textAnchor=\"middle\"\n transform={`rotate(-90, ${x}, ${y})`}\n >\n {axis.label}\n </text>\n </Tooltip>\n );\n })}\n </svg>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAsCA,IAAM,qBAAqB,IAAI,KAAK,aAAa,SAAS,EACxD,uBAAuB,EACzB,CAAC,CAAC,CAAC;AAEH,IAAM,uBACJ,UACA,QACA,WACA,cAC+B;CAC/B,GAAG;CACH;CACA;CACA,QAAQ,OAAO,KAAK,UAAU;EAC5B,UAAU,KAAK;EACf,aAAa,KAAK;EAClB,OAAO,KAAK;EACZ,OAAO,KAAK,OAAO,MAAM,UAAU,MAAM,MAAM,QAAQ,CAAC,EAAE,KAAK;CACjE,EAAE;AACJ;AAgDA,IAAa,iBAAiB,EAC5B,OACA,QACA,YACA,aACA,aACA,QACA,cACA,WACA,mBACA,eACA,MACA,QACA,cACA,YACA,aACA,YACA,cACA,cACA,iBACA,SACA,oBACA,gBACA,QACA,iBACA,eACA,aACA,oBACA,oBACA,mBACA,kBACA,GAAG,gBACqB;CACxB,MAAM,kBAAkB,OAAsB,IAAI;CAClD,MAAM,aAAa,cAAc,MAAM,CAAC,CAAC,QAAQ,MAAM,EAAE;CACzD,MAAM,mBAAmB,GAAG,WAAW;CACvC,MAAM,WAAW,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;CAC5D,MAAM,cAAc,KAAK;CACzB,MAAM,wBACJ,sBAAsB,QACtB,sBAAsB,QACtB,oBAAoB;CACtB,MAAM,qBAAqB,eAAe,QAAQ,MAAM,IAAI;CAC5D,MAAM,sBACJ,eAAe,OACX,mBAAmB,eAAe,kBAAkB,IACpD,MAAM,KAAK,WAAW;CAC5B,MAAM,kBAAkB,WAAW,OAAO,OAAO,aAAa,OAAO;CACrE,MAAM,aACJ,mBAAmB,QACnB,mBAAmB,KACnB,mBAAmB;CACrB,MAAM,YAAY,eAAe,aAAa,KAAK,cAAc;CACjE,MAAM,mBAAmB,iBAAiB,KAAK,UAAU,CAAC;CAC1D,MAAM,oBAAoB,aAAa,OAAO,SAAS;CACvD,MAAM,oBAAoB,SACxB,KAAK,WACJ,sBAAsB,QAAQ,uBAAuB,KAAK,KACvD,uBACA;CACN,MAAM,mBAAmB,KAAK,UAAU,OAAO,KAAK,SAAS,KAAK,EAAE,CAAC;CACrE,MAAM,CAAC,aAAa,iBACX;EACL,MAAM,EAAE,UAAU,EAAE;EACpB,IAAI,EAAE,UAAU,oBAAoB,IAAI,EAAE;EAC1C,OAAO;EACP,WAAW;CACb,IACA;EAAC;EAAkB;EAAmB;CAAe,CACvD;CAEA,MAAM,uBAAuB,UAAuC;EAClE,IAAI,cAAc,WAAW,KAAK,eAAe,GAAG,OAAO;EAC3D,MAAM,SAAS,MAAM,cAAc,sBAAsB;EACzD,MAAM,OAAO,MAAM,UAAU,OAAO,OAAO,YAAY;EAEvD,MAAM,QACJ,gBAAgB,YAAY,MAAM,YAC9B,KAAK,IAAI,GAAG,KAAK,IAAI,YAAY,IAAI,CAAC,IACtC;EACN,MAAM,QAAQ,MAAM,UAAU,OAAO,MAAM,YAAY;EACvD,IAAI,QAAQ,KAAK,QAAQ,cAAc,QAAQ,KAAK,QAAQ,aAC1D,OAAO;EACT,MAAM,WAAW,UAAU,KAAK;EAChC,MAAM,WAAW,qBAAqB,eAAe,OAAO,YAAY;EACxE,IAAI,YAAY,MAAM,OAAO;EAC7B,OAAO,oBACL,UACA,QACA,YAAY,OAAO,aAAa,QAAQ,GACxC,QACF;CACF;CAEA,MAAM,kBACJ,kBAAkB,OAAO,OAAO,kBAAkB,eAAe,IAAI;CACvE,MAAM,gBACJ,kBAAkB,OAAO,OAAO,kBAAkB,eAAe,EAAE;CACrE,MAAM,kBAAkB,mBACtB,iBACA,eACA,UACF;CACA,MAAM,0BAA0B;EAC9B,gBAAgB,UAAU;EAC1B,oBAAoB;CACtB;CACA,MAAM,qBAAqB,UAAuC;EAChE,MAAM,QAAQ,oBAAoB,KAAK;EACvC,IAAI,SAAS,MAAM,kBAAkB;OAChC,qBAAqB,OAAO,KAAK;CACxC;CACA,MAAM,qBAAqB,UAAuC;EAChE,MAAM,QAAQ,oBAAoB,KAAK;EACvC,IAAI,SAAS,QAAQ,sBAAsB,MAAM;EACjD,IAAI,MAAM,WAAW,GAAG,gBAAgB,UAAU,MAAM;EACxD,mBAAmB,OAAO,KAAK;CACjC;CACA,MAAM,mBAAmB,UAAuC;EAC9D,MAAM,QAAQ,oBAAoB,KAAK;EACvC,IAAI,SAAS,MAAM,OAAO,kBAAkB;EAC5C,gBAAgB,UAAU;EAC1B,mBAAmB,OAAO,KAAK;CACjC;CAEA,OACE,qBAAC,OAAD;EACS;EACC;EACR,MAAK;EACL,GAAI;EACJ,WAAU;EACV,WAAW,GACT,mBACA,yBAAyB,kBAC3B;EACA,eAAe;EACf,eAAe;EACf,gBAAgB;EAChB,iBAAiB;EACjB,aAAa;EAdf,UAAA,CAgBG,aACC,qBAAC,OAAD;GAAO,MAAM,YAAY;GAAM,KAAK,YAAY;GAAhD,UAAA;IACE,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,YAAD;KAAU,IAAI;KACZ,UAAA,oBAAC,QAAD;MAAM,OAAO;MAAY,QAAQ;KAAc,CAAA;IACvC,CAAA,GACV,oBAAC,YAAD;KAAU,IAAI;KACZ,UAAA,oBAAC,SAAS,MAAV;MACE,OAAO,UAAU,SAAS,IACvB,aAAa,WAAW,UAC3B;MACA,QAAQ;KACT,CAAA;IACO,CAAA,CACN,EAAA,CAAA;IACN,oBAAC,KAAD;KAAG,UAAU,QAAQ,WAAW;KAC7B,UAAA,OAAO,KAAK,SAAS;MACpB,MAAM,OACJ,KAAK,WAAW,OAAO,cAAc,SAAS,IAAI,KAAK,OAAO;MAChE,IAAI,QAAQ,MAAM,OAAO;MACzB,MAAM,SAAS,KAAK,MAAM,OAAO;MACjC,MAAM,OAAO,KAAK,QAAQ,OAAO;MACjC,MAAM,KAAK,KAAK,MAAM,OAAO,GAAG,EAAE;MAClC,IAAI,QAAQ,QAAQ,MAAM,MAAM,OAAO;MACvC,MAAM,QAAQ,KAAK,MAAM,IAAI;MAC7B,MAAM,MAAM,KAAK,MAAM,EAAE;MACzB,OACE,oBAAC,QAAD;OAEE,OAAO;OACP,QAAQ,KAAK,IAAI,MAAM,KAAK;OAC5B,GAAG,KAAK,IAAI,OAAO,GAAG;OACtB,MAAM,KAAK;OACX,aAAa,KAAK,WAAW;MAC9B,GANM,KAAK,EAMX;KAEL,CAAC;IACA,CAAA;IACF,gBAAgB,eAAe,QAC9B,oBAAC,UAAD;KACE,OAAO,YAAY;KACnB,OAAO;KACP,UAAU,YAAY,aAAA;KACtB,YACE,YAAY,cAAc,OACtB,KAAA,IACA,MAAM,KAAK,YAAY,UAAU;KAEvC,QAAO;KACP,iBAAA;IACD,CAAA;IAEF,mBACC,oBAAC,aAAD;KACE,OAAO;KACP,QAAQ;KACR,UAAU;KACV,YAAY;KACZ,QAAO;KACP,iBAAA;IACD,CAAA;IAEH,oBAAC,0BAAD;KACmB;KACL;KACC;KACC;IACf,CAAA;IACD,oBAAC,YAAD;KACE,OAAO;KACP,KAAK;KACL,UAAU;KACV,YAAY;KACZ,cAAA;KACA,WAAA;KACA,aAAa,UAAU,aAAa,MAAM,QAAQ,CAAC;KACnD,gBAAgB;MACd,MAAM;MACN,UAAA;MACA,YAAY;MACZ,IAAI;KACN;IACD,CAAA;IACA,KAAK,KAAK,MAAM,UAAU;KACzB,MAAM,cAAc,WACjB,KAAK,eAAe,mBAAA,CAAoB,MAAM,QAAQ,CAAC;KAC1D,MAAM,aAA8B,UAAU,IAAI,QAAQ;KAC1D,MAAM,aACJ,KAAK,cAAc,OAAO,KAAA,IAAY,MAAM,KAAK,KAAK,UAAU;KAClE,MAAM,YAAY;MAChB,OAAO,KAAK;MACZ,UAAU,KAAK,aAAA;MACf;MACA,YAAA;MACA,cAAc;MACd,WAAW;MACX;MACA,gBAAgB;OACd,MAAM;OACN,UAAA;OACA;OACA,IAAI,UAAU,IAAI,YAAY;OAC9B,IAAI;MACN;KACF;KACA,OAAO,UAAU,IACf,oBAAC,UAAD,EAAwB,GAAI,UAAY,GAAzB,KAAK,EAAoB,IAExC,oBAAC,WAAD;MAEE,GAAI;MACJ,MAAM,aAAa,4BAA4B,MAAM,KAAK;KAC3D,GAHM,KAAK,EAGX;IAEL,CAAC;IACD,qBAAC,KAAD;KAAG,UAAU,QAAQ,WAAW;KAAhC,UAAA;MACE,qBAAC,KAAD;OAAG,UAAU,QAAQ,iBAAiB;OAAtC,UAAA,CACG,OAAO,KAAK,SAAS;QACpB,MAAM,OAAO,SAAS,IAAI,KAAK,OAAO;QACtC,IAAI,QAAQ,MAAM,OAAO;QACzB,OACE,oBAAC,KAAD;SAEE,MAAK;SACL,cAAY,GAAG,KAAK,iBAAiB,KAAK,GAAG;SAE5C,UAAA,gBAAgB,KAAK,QAAQ,YAAY,CAAC,CAAC,KACzC,SAAS,UACR,oBAAC,UAAD;UAEE,MAAM;UACN,OAAO;UACP,MAAK;UACL,QAAQ,KAAK;UACb,aAAa,KAAK;UAClB,iBAAiB,KAAK;UACtB,SAAS,iBAAiB,IAAI;UAC9B,WAAU;UACV,eAAc;UACd,gBAAe;UACf,IAAI,UAAU,aAAa,MAAM,CAAC;UAClC,IAAI,UAAU,KAAK,MAAM,MAAM,KAAK,CAAC;SACtC,GAbM,KAaN,CAEL;QACC,GAvBI,KAAK,EAuBT;OAEP,CAAC,GACA,cACC,OAAO,SAAS,SAAS;QACvB,MAAM,OAAO,SAAS,IAAI,KAAK,OAAO;QACtC,IAAI,QAAQ,MAAM,OAAO,CAAC;QAC1B,OAAO,KAAK,OAAO,SAAS,OAAO,eACjC,MAAM,KAAK,OACP,CAAC,IACD,CACE,oBAAC,UAAD;SAEE,IAAI,aAAa,MAAM,CAAC;SACxB,IAAI,KAAK,MAAM,MAAM,CAAC;SACtB,GAAG;SACH,MAAM,KAAK;SACX,SAAS,iBAAiB,IAAI;SAC9B,WAAU;QACX,GAPM,GAAG,KAAK,GAAG,GAAG,MAAM,EAAE,GAAG,YAO/B,CACH,CACN;OACF,CAAC,CACF;;MACF,mBAAmB,QAClB,oBAAC,KAAD;OACE,MAAK;OACL,cAAY,uBAAuB,aACjC,KAAK,IAAI,gBAAgB,QAAQ,GAAG,gBAAgB,MAAM,CAAC,CAC7D,EAAE,MAAM,aACN,KAAK,IAAI,gBAAgB,QAAQ,GAAG,gBAAgB,MAAM,CAAC,CAC7D;OAEA,UAAA,oBAAC,QAAD;QACE,eAAY;QACZ,GAAG,gBAAgB;QACnB,GAAG;QACH,OAAO,gBAAgB;QACvB,QAAQ;QACR,MAAK;QACL,aAAa;QACb,QAAO;QACP,eAAc;OACf,CAAA;MACA,CAAA;MAEJ,cACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;OACE,IAAI;OACJ,IAAI;OACJ,IAAI;OACJ,IAAI;OACJ,QAAO;OACP,aAAa;OACb,iBAAA;OACA,WAAU;MACX,CAAA,GACA,OAAO,SAAS,SAAS;OACxB,IAAI,CAAC,KAAK,kBAAkB,OAAO,CAAC;OACpC,MAAM,OAAO,SAAS,IAAI,KAAK,OAAO;OACtC,MAAM,QAAQ,KAAK,OAAO,MACvB,cAAc,UAAU,MAAM,OACjC;OACA,IAAI,QAAQ,QAAQ,OAAO,KAAK,MAAM,OAAO,CAAC;OAC9C,OAAO,CACL,oBAAC,UAAD;QAEE,IAAI;QACJ,IAAI,KAAK,MAAM,MAAM,CAAC;QACtB,GAAG;QACH,MAAM,KAAK;QACX,SAAS,iBAAiB,IAAI;QAC9B,WAAU;QACV,QAAO;QACP,aAAa;OACd,GATM,UAAU,KAAK,IASrB,CACH;MACF,CAAC,CACD,EAAA,CAAA;KAEH;;IACF,yBACC,oBAAC,QAAD;KAAM,OAAO;KAAY,QAAQ;KAAa,MAAK;IAAe,CAAA;GAE/D;EAER,CAAA,GAAA,aACC,KAAK,KAAK,MAAM,UAAU;GACxB,IAAI,KAAK,SAAS,MAAM,OAAO;GAC/B,MAAM,IACJ,UAAU,IACN,YAAY,OAAO,wBAAwB,KAAK,SAAS,IACzD,YAAY,OACZ,aACA,4BAA4B,MAAM,KAAK,IACvC,wBAAwB,KAAK,SAAS;GAC5C,MAAM,IAAI,YAAY,MAAM,cAAc;GAC1C,OACE,oBAAC,SAAD;IAAS,OAAO,KAAK;IACnB,UAAA,oBAAC,QAAD;KACK;KACA;KACH,MAAK;KACL,UAAA;KACA,YAAY;KACZ,YAAW;KACX,WAAW,eAAe,EAAE,IAAI,EAAE;KAEjC,UAAA,KAAK;IACF,CAAA;GACC,GAZwB,KAAK,EAY7B;EAEb,CAAC,CACA;;AAET"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { LineChartVerticalMarker } from './LineChart.types.js';
|
|
2
|
+
export declare const LineChartVerticalMarkers: ({ verticalMarkers, innerWidth, innerHeight, getXPosition, }: {
|
|
3
|
+
verticalMarkers: readonly LineChartVerticalMarker[];
|
|
4
|
+
innerWidth: number;
|
|
5
|
+
innerHeight: number;
|
|
6
|
+
/** Same projection the crosshair uses, so band scales centre correctly. */
|
|
7
|
+
getXPosition: (value: number) => number;
|
|
8
|
+
}) => import("react").JSX.Element;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import "../../utils/chartConstants.js";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { getStringWidth } from "@visx/text";
|
|
4
|
+
//#region packages/components/src/components/LineChart/LineChartVerticalMarkers.tsx
|
|
5
|
+
/** Gap between a marker and its label, in px. */
|
|
6
|
+
var LABEL_OFFSET = 4;
|
|
7
|
+
var MARKER_COLORS = {
|
|
8
|
+
default: "var(--border-strong)",
|
|
9
|
+
error: "var(--border-error-strong)"
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Flips to the left of the marker when it would run past the plot and fits
|
|
13
|
+
* there; otherwise stays right so at least its start is readable.
|
|
14
|
+
*/
|
|
15
|
+
var MarkerLabel = ({ label, x, innerWidth }) => {
|
|
16
|
+
const width = getStringWidth(label, { fontSize: `12px` }) ?? 0;
|
|
17
|
+
const placeLeft = x + LABEL_OFFSET + width > innerWidth && x - LABEL_OFFSET - width >= 0;
|
|
18
|
+
return /* @__PURE__ */ jsx("text", {
|
|
19
|
+
x: placeLeft ? x - LABEL_OFFSET : x + LABEL_OFFSET,
|
|
20
|
+
y: 12,
|
|
21
|
+
fill: "var(--text-tertiary)",
|
|
22
|
+
fontSize: 12,
|
|
23
|
+
textAnchor: placeLeft ? "end" : "start",
|
|
24
|
+
children: label
|
|
25
|
+
});
|
|
26
|
+
};
|
|
27
|
+
var LineChartVerticalMarkers = ({ verticalMarkers, innerWidth, innerHeight, getXPosition }) => /* @__PURE__ */ jsx(Fragment, { children: verticalMarkers.map((marker) => {
|
|
28
|
+
const x = getXPosition(marker.x);
|
|
29
|
+
if (!Number.isFinite(x) || x < 0 || x > innerWidth) return null;
|
|
30
|
+
return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
|
|
31
|
+
x1: x,
|
|
32
|
+
x2: x,
|
|
33
|
+
y1: 0,
|
|
34
|
+
y2: innerHeight,
|
|
35
|
+
stroke: MARKER_COLORS[marker.variant ?? "default"],
|
|
36
|
+
strokeWidth: 1,
|
|
37
|
+
strokeDasharray: "4 2"
|
|
38
|
+
}), marker.label != null && /* @__PURE__ */ jsx(MarkerLabel, {
|
|
39
|
+
label: marker.label,
|
|
40
|
+
x,
|
|
41
|
+
innerWidth
|
|
42
|
+
})] }, marker.id);
|
|
43
|
+
}) });
|
|
44
|
+
//#endregion
|
|
45
|
+
export { LineChartVerticalMarkers };
|
|
46
|
+
|
|
47
|
+
//# sourceMappingURL=LineChartVerticalMarkers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LineChartVerticalMarkers.js","names":[],"sources":["../../../src/components/LineChart/LineChartVerticalMarkers.tsx"],"sourcesContent":["import { getStringWidth } from '@visx/text';\n\nimport {\n CHART_DASHED_STROKE_DASHARRAY,\n CHART_TICK_FONT_SIZE,\n} from '../../utils/chartConstants';\nimport type {\n LineChartVerticalMarker,\n LineChartVerticalMarkerVariant,\n} from './LineChart.types';\n\n/** Gap between a marker and its label, in px. */\nconst LABEL_OFFSET = 4;\n\nconst MARKER_COLORS: Record<LineChartVerticalMarkerVariant, string> = {\n default: 'var(--border-strong)',\n error: 'var(--border-error-strong)',\n};\n\n/**\n * Flips to the left of the marker when it would run past the plot and fits\n * there; otherwise stays right so at least its start is readable.\n */\nconst MarkerLabel = ({\n label,\n x,\n innerWidth,\n}: {\n label: string;\n x: number;\n innerWidth: number;\n}) => {\n const width =\n getStringWidth(label, { fontSize: `${CHART_TICK_FONT_SIZE}px` }) ?? 0;\n const placeLeft =\n x + LABEL_OFFSET + width > innerWidth && x - LABEL_OFFSET - width >= 0;\n return (\n <text\n x={placeLeft ? x - LABEL_OFFSET : x + LABEL_OFFSET}\n y={CHART_TICK_FONT_SIZE}\n fill=\"var(--text-tertiary)\"\n fontSize={CHART_TICK_FONT_SIZE}\n textAnchor={placeLeft ? 'end' : 'start'}\n >\n {label}\n </text>\n );\n};\n\nexport const LineChartVerticalMarkers = ({\n verticalMarkers,\n innerWidth,\n innerHeight,\n getXPosition,\n}: {\n verticalMarkers: readonly LineChartVerticalMarker[];\n innerWidth: number;\n innerHeight: number;\n /** Same projection the crosshair uses, so band scales centre correctly. */\n getXPosition: (value: number) => number;\n}) => (\n <>\n {verticalMarkers.map((marker) => {\n const x = getXPosition(marker.x);\n // Dropped rather than clamped: on an axis edge a marker reads as a bound\n // of the data rather than a moment in it.\n if (!Number.isFinite(x) || x < 0 || x > innerWidth) return null;\n return (\n <g key={marker.id}>\n <line\n x1={x}\n x2={x}\n y1={0}\n y2={innerHeight}\n stroke={MARKER_COLORS[marker.variant ?? 'default']}\n strokeWidth={1}\n strokeDasharray={CHART_DASHED_STROKE_DASHARRAY}\n />\n {marker.label != null && (\n <MarkerLabel label={marker.label} x={x} innerWidth={innerWidth} />\n )}\n </g>\n );\n })}\n </>\n);\n"],"mappings":";;;;;AAYA,IAAM,eAAe;AAErB,IAAM,gBAAgE;CACpE,SAAS;CACT,OAAO;AACT;;;;;AAMA,IAAM,eAAe,EACnB,OACA,GACA,iBAKI;CACJ,MAAM,QACJ,eAAe,OAAO,EAAE,UAAU,OAA4B,CAAC,KAAK;CACtE,MAAM,YACJ,IAAI,eAAe,QAAQ,cAAc,IAAI,eAAe,SAAS;CACvE,OACE,oBAAC,QAAD;EACE,GAAG,YAAY,IAAI,eAAe,IAAI;EACtC,GAAA;EACA,MAAK;EACL,UAAA;EACA,YAAY,YAAY,QAAQ;EAE/B,UAAA;CACG,CAAA;AAEV;AAEA,IAAa,4BAA4B,EACvC,iBACA,YACA,aACA,mBAQA,oBAAA,UAAA,EAAA,UACG,gBAAgB,KAAK,WAAW;CAC/B,MAAM,IAAI,aAAa,OAAO,CAAC;CAG/B,IAAI,CAAC,OAAO,SAAS,CAAC,KAAK,IAAI,KAAK,IAAI,YAAY,OAAO;CAC3D,OACE,qBAAC,KAAD,EAAA,UAAA,CACE,oBAAC,QAAD;EACE,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,QAAQ,cAAc,OAAO,WAAW;EACxC,aAAa;EACb,iBAAA;CACD,CAAA,GACA,OAAO,SAAS,QACf,oBAAC,aAAD;EAAa,OAAO,OAAO;EAAU;EAAe;CAAa,CAAA,CAElE,EAAA,GAbK,OAAO,EAaZ;AAEP,CAAC,EACD,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { LineChart } from './LineChart.js';
|
|
2
|
-
export type { LineChartInteractionDatum, LineChartInteractionPoint, LineChartGrid, LineChartPoint, LineChartProps, LineChartSelectionRange, LineChartSeries, LineChartXScale, LineChartYBand, LineChartYAxis, } from './LineChart.types.js';
|
|
2
|
+
export type { LineChartInteractionDatum, LineChartInteractionPoint, LineChartGrid, LineChartPoint, LineChartProps, LineChartSelectionRange, LineChartSeries, LineChartVerticalMarker, LineChartXScale, LineChartYBand, LineChartYAxis, } from './LineChart.types.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { cn } from "../../utils/cn.js";
|
|
2
2
|
import "react";
|
|
3
|
-
import { sanitizeUrl } from "@braintree/sanitize-url";
|
|
4
3
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { sanitizeUrl } from "@braintree/sanitize-url";
|
|
5
5
|
//#region packages/components/src/components/Logo/EngineBadgeDark.svg?react
|
|
6
6
|
var SvgEngineBadgeDark = (props) => /* @__PURE__ */ jsxs("svg", {
|
|
7
7
|
width: 35,
|
|
@@ -19,7 +19,8 @@ var SvgEngineBadgeDark = (props) => /* @__PURE__ */ jsxs("svg", {
|
|
|
19
19
|
fillRule: "evenodd",
|
|
20
20
|
clipRule: "evenodd",
|
|
21
21
|
d: "M13.2919 20.9351C11.4214 20.9583 9.54362 20.2573 8.11778 18.8314C5.3123 16.0259 5.3123 11.4702 8.11778 8.66468C10.9235 5.85917 15.479 5.85917 18.2844 8.66468C19.7103 10.0905 20.4116 11.9684 20.3881 13.8389C19.0178 13.9178 17.665 14.3683 16.4944 15.1902C17.0696 13.8741 16.8192 12.2827 15.743 11.2064C14.3401 9.80355 12.0624 9.80355 10.6595 11.2064C9.25665 12.6091 9.25665 14.8868 10.6595 16.2897C11.7358 17.366 13.3271 17.6165 14.6432 17.0413C15.0424 16.8668 15.4164 16.6163 15.743 16.2897C17.0309 15.0017 18.6875 14.305 20.3747 14.1997C20.4947 14.1921 20.615 14.1877 20.7355 14.186C22.6057 14.1628 24.4835 14.8638 25.9094 16.2897C28.7151 19.0952 28.7151 23.6509 25.9094 26.4564C23.1039 29.2619 18.5484 29.2619 15.743 26.4564C14.3171 25.0306 13.6158 23.1527 13.6393 21.2822C15.0096 21.2033 16.3621 20.7528 17.533 19.9309C16.9578 21.247 17.2082 22.8384 18.2844 23.9147C19.6873 25.3175 21.965 25.3175 23.3679 23.9147C24.7705 22.512 24.7705 20.2343 23.3679 18.8314C22.2916 17.7551 20.7003 17.5046 19.3842 18.0798C18.985 18.2543 18.611 18.5048 18.2844 18.8314C16.9965 20.1194 15.3399 20.8161 13.6527 20.9214C13.5327 20.929 13.4122 20.9334 13.2919 20.9351Z",
|
|
22
|
-
fill: "#7FC8FF"
|
|
22
|
+
fill: "#7FC8FF",
|
|
23
|
+
transform: "translate(34.59 0) scale(-1 1)"
|
|
23
24
|
})]
|
|
24
25
|
});
|
|
25
26
|
//#endregion
|
|
@@ -40,7 +41,8 @@ var SvgEngineBadgeLight = (props) => /* @__PURE__ */ jsxs("svg", {
|
|
|
40
41
|
fillRule: "evenodd",
|
|
41
42
|
clipRule: "evenodd",
|
|
42
43
|
d: "M13.2919 20.9351C11.4214 20.9583 9.54362 20.2573 8.11778 18.8314C5.3123 16.0259 5.3123 11.4702 8.11778 8.66468C10.9235 5.85917 15.479 5.85917 18.2844 8.66468C19.7103 10.0905 20.4116 11.9684 20.3881 13.8389C19.0178 13.9178 17.665 14.3683 16.4944 15.1902C17.0696 13.8741 16.8192 12.2827 15.743 11.2064C14.3401 9.80355 12.0624 9.80355 10.6595 11.2064C9.25665 12.6091 9.25665 14.8868 10.6595 16.2897C11.7358 17.366 13.3271 17.6165 14.6432 17.0413C15.0424 16.8668 15.4164 16.6163 15.743 16.2897C17.0309 15.0017 18.6875 14.305 20.3747 14.1997C20.4947 14.1921 20.615 14.1877 20.7355 14.186C22.6057 14.1628 24.4835 14.8638 25.9094 16.2897C28.7151 19.0952 28.7151 23.6509 25.9094 26.4564C23.1039 29.2619 18.5484 29.2619 15.743 26.4564C14.3171 25.0306 13.6158 23.1527 13.6393 21.2822C15.0096 21.2033 16.3621 20.7528 17.533 19.9309C16.9578 21.247 17.2082 22.8384 18.2844 23.9147C19.6873 25.3175 21.965 25.3175 23.3679 23.9147C24.7705 22.512 24.7705 20.2343 23.3679 18.8314C22.2916 17.7551 20.7003 17.5046 19.3842 18.0798C18.985 18.2543 18.611 18.5048 18.2844 18.8314C16.9965 20.1194 15.3399 20.8161 13.6527 20.9214C13.5327 20.929 13.4122 20.9334 13.2919 20.9351Z",
|
|
43
|
-
fill: "#101A30"
|
|
44
|
+
fill: "#101A30",
|
|
45
|
+
transform: "translate(34.59 0) scale(-1 1)"
|
|
44
46
|
})]
|
|
45
47
|
});
|
|
46
48
|
//#endregion
|
|
@@ -56,7 +58,8 @@ var SvgEngineIconLight = (props) => /* @__PURE__ */ jsx("svg", {
|
|
|
56
58
|
fillRule: "evenodd",
|
|
57
59
|
clipRule: "evenodd",
|
|
58
60
|
d: "M20.6208 40.7257C15.3213 40.7915 10.0011 38.8053 5.96137 34.7656C-1.98712 26.8171 -1.98712 13.9099 5.96137 5.96137C13.9106 -1.98712 26.8171 -1.98712 34.7656 5.96137C38.8053 10.0011 40.7922 15.3213 40.7257 20.6208C36.8432 20.8444 33.0106 22.1208 29.694 24.4492C31.3235 20.7205 30.6144 16.2119 27.565 13.1626C23.5904 9.188 17.1372 9.188 13.1626 13.1626C9.188 17.1365 9.188 23.5897 13.1626 27.5643C16.2119 30.6137 20.7205 31.3235 24.4492 29.694C25.5802 29.1995 26.6398 28.4896 27.565 27.5643C31.2141 23.9153 35.9076 21.9415 40.6876 21.643C41.0277 21.6215 41.3684 21.609 41.7098 21.6042C47.0086 21.5384 52.3288 23.5246 56.3685 27.5643C64.3177 35.5128 64.3177 48.42 56.3685 56.3685C48.42 64.317 35.5135 64.317 27.565 56.3685C23.5253 52.3288 21.5384 47.0086 21.6049 41.7091C25.4874 41.4855 29.3193 40.2091 32.6366 37.8807C31.0071 41.6094 31.7162 46.118 34.7656 49.1673C38.7402 53.1419 45.1934 53.1419 49.168 49.1673C53.1419 45.1934 53.1419 38.7402 49.168 34.7656C46.1187 31.7162 41.6101 31.0064 37.8814 32.6359C36.7504 33.1304 35.6908 33.8403 34.7656 34.7656C31.1165 38.4147 26.423 40.3884 21.643 40.6869C21.3029 40.7084 20.9615 40.7209 20.6208 40.7257Z",
|
|
59
|
-
fill: "#7FC8FF"
|
|
61
|
+
fill: "#7FC8FF",
|
|
62
|
+
transform: "translate(63 0) scale(-1 1)"
|
|
60
63
|
})
|
|
61
64
|
});
|
|
62
65
|
//#endregion
|
|
@@ -79,7 +82,8 @@ var SvgEngineLogoDark = (props) => /* @__PURE__ */ jsxs("svg", {
|
|
|
79
82
|
fillRule: "evenodd",
|
|
80
83
|
clipRule: "evenodd",
|
|
81
84
|
d: "M13.2919 20.9351C11.4214 20.9583 9.54362 20.2573 8.11778 18.8314C5.3123 16.0259 5.3123 11.4702 8.11778 8.66468C10.9235 5.85917 15.479 5.85917 18.2844 8.66468C19.7103 10.0905 20.4116 11.9684 20.3881 13.8389C19.0178 13.9178 17.665 14.3683 16.4944 15.1902C17.0696 13.8741 16.8192 12.2827 15.743 11.2064C14.3401 9.80355 12.0624 9.80355 10.6595 11.2064C9.25665 12.6091 9.25665 14.8868 10.6595 16.2897C11.7358 17.366 13.3271 17.6165 14.6432 17.0413C15.0424 16.8668 15.4164 16.6163 15.743 16.2897C17.0309 15.0017 18.6875 14.305 20.3747 14.1997C20.4947 14.1921 20.615 14.1877 20.7355 14.186C22.6057 14.1628 24.4835 14.8638 25.9094 16.2897C28.7151 19.0952 28.7151 23.6509 25.9094 26.4564C23.1039 29.2619 18.5484 29.2619 15.743 26.4564C14.3171 25.0306 13.6158 23.1527 13.6393 21.2822C15.0096 21.2033 16.3621 20.7528 17.533 19.9309C16.9578 21.247 17.2082 22.8384 18.2844 23.9147C19.6873 25.3175 21.965 25.3175 23.3679 23.9147C24.7705 22.512 24.7705 20.2343 23.3679 18.8314C22.2916 17.7551 20.7003 17.5046 19.3842 18.0798C18.985 18.2543 18.611 18.5048 18.2844 18.8314C16.9965 20.1194 15.3399 20.8161 13.6527 20.9214C13.5327 20.929 13.4122 20.9334 13.2919 20.9351Z",
|
|
82
|
-
fill: "#7FC8FF"
|
|
85
|
+
fill: "#7FC8FF",
|
|
86
|
+
transform: "translate(34.59 0) scale(-1 1)"
|
|
83
87
|
}),
|
|
84
88
|
/* @__PURE__ */ jsxs("g", {
|
|
85
89
|
clipPath: "url(#clip0_16646_49025)",
|
|
@@ -169,7 +173,8 @@ var SvgEngineLogoLight = (props) => /* @__PURE__ */ jsxs("svg", {
|
|
|
169
173
|
fillRule: "evenodd",
|
|
170
174
|
clipRule: "evenodd",
|
|
171
175
|
d: "M13.2919 20.9351C11.4214 20.9583 9.54362 20.2573 8.11778 18.8314C5.3123 16.0259 5.3123 11.4702 8.11778 8.66468C10.9235 5.85917 15.479 5.85917 18.2844 8.66468C19.7103 10.0905 20.4116 11.9684 20.3881 13.8389C19.0178 13.9178 17.665 14.3683 16.4944 15.1902C17.0696 13.8741 16.8192 12.2827 15.743 11.2064C14.3401 9.80355 12.0624 9.80355 10.6595 11.2064C9.25665 12.6091 9.25665 14.8868 10.6595 16.2897C11.7358 17.366 13.3271 17.6165 14.6432 17.0413C15.0424 16.8668 15.4164 16.6163 15.743 16.2897C17.0309 15.0017 18.6875 14.305 20.3747 14.1997C20.4947 14.1921 20.615 14.1877 20.7355 14.186C22.6057 14.1628 24.4835 14.8638 25.9094 16.2897C28.7151 19.0952 28.7151 23.6509 25.9094 26.4564C23.1039 29.2619 18.5484 29.2619 15.743 26.4564C14.3171 25.0306 13.6158 23.1527 13.6393 21.2822C15.0096 21.2033 16.3621 20.7528 17.533 19.9309C16.9578 21.247 17.2082 22.8384 18.2844 23.9147C19.6873 25.3175 21.965 25.3175 23.3679 23.9147C24.7705 22.512 24.7705 20.2343 23.3679 18.8314C22.2916 17.7551 20.7003 17.5046 19.3842 18.0798C18.985 18.2543 18.611 18.5048 18.2844 18.8314C16.9965 20.1194 15.3399 20.8161 13.6527 20.9214C13.5327 20.929 13.4122 20.9334 13.2919 20.9351Z",
|
|
172
|
-
fill: "#101A30"
|
|
176
|
+
fill: "#101A30",
|
|
177
|
+
transform: "translate(34.59 0) scale(-1 1)"
|
|
173
178
|
}),
|
|
174
179
|
/* @__PURE__ */ jsxs("g", {
|
|
175
180
|
clipPath: "url(#clip0_16646_49002)",
|