layerchart 2.0.0-next.5 → 2.0.0-next.51

package/dist/components/Chart.svelte.d.ts

@@ -1,13 +1,20 @@
-import { type Accessor } from '../utils/common.js';
-import { type AnyScale, type DomainType } from '../utils/scales.svelte.js';
-import type { AxisKey, BaseRange, DataType, Extents, Nice, Padding, PaddingArray, XRangeWithScale, YRangeWithScale } from '../utils/types.js';
 import { type ComponentProps, type Snippet } from 'svelte';
-import GeoContext, { type GeoContextValue } from './GeoContext.svelte';
-import TooltipContext, { type TooltipContextValue } from './tooltip/TooltipContext.svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TimeInterval } from 'd3-time';
 import type { HierarchyNode } from 'd3-hierarchy';
 import type { SankeyGraph } from 'd3-sankey';
-import TransformContext, { type TransformContextValue } from './TransformContext.svelte';
-import BrushContext, { type BrushContextValue } from './BrushContext.svelte';
+import { type Accessor } from '../utils/common.js';
+import type { MotionProp } from '../utils/motion.svelte.js';
+import { type AnyScale, type DomainType } from '../utils/scales.svelte.js';
+import type { BaseRange, Nice, PaddingArray, Without, XRangeWithScale, YRangeWithScale } from '../utils/types.js';
+import type { GeoStateProps } from '../states/geo.svelte.js';
+import TooltipContext from './tooltip/TooltipContext.svelte';
+import TransformContext from './TransformContext.svelte';
+import BrushContext from './BrushContext.svelte';
+import { ChartState } from '../states/chart.svelte.js';
+import type { StackLayout } from '../states/series.svelte.js';
+import type { ChartChildrenProps } from './ChartChildren.svelte';
+import type { SeriesData } from './charts/types.js';
 export type ChartResizeDetail = {
     width: number;
     height: number;
@@ -15,78 +22,6 @@ export type ChartResizeDetail = {
     containerHeight: number;
 };
 export type PreservedChartConfig<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = Pick<ChartPropsWithoutHTML<T, XScale, YScale>, 'x' | 'y' | 'z' | 'r' | 'c' | 'x1' | 'y1' | 'xRange' | 'yRange' | 'cDomain' | 'zDomain' | 'xDomain' | 'yDomain' | 'rDomain' | 'x1Domain' | 'y1Domain' | 'zRange' | 'rRange' | 'cRange' | 'x1Range' | 'y1Range'>;
-export type ChartContextValue<T = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = {
-    activeGetters: Record<AxisKey, (d: T) => any>;
-    width: number;
-    height: number;
-    percentRange: boolean;
-    aspectRatio: number;
-    containerRef: HTMLElement | undefined;
-    containerWidth: number;
-    containerHeight: number;
-    config: PreservedChartConfig<T, XScale, YScale>;
-    x: (d: T) => any;
-    y: (d: T) => any;
-    z: (d: T) => any;
-    r: (d: T) => any;
-    x1: (d: T) => any;
-    y1: (d: T) => any;
-    c: (d: T) => any;
-    data: DataType<T>;
-    xNice: Nice;
-    yNice: Nice;
-    zNice: Nice;
-    rNice: Nice;
-    xDomainSort: boolean;
-    yDomainSort: boolean;
-    zDomainSort: boolean;
-    rDomainSort: boolean;
-    xReverse: boolean;
-    yReverse: boolean;
-    zReverse: boolean;
-    rReverse: boolean;
-    xPadding: PaddingArray;
-    yPadding: PaddingArray;
-    zPadding: PaddingArray;
-    rPadding: PaddingArray;
-    padding: Padding;
-    flatData: T[];
-    extents: Extents;
-    xDomain: number[];
-    yDomain: number[];
-    zDomain: DomainType;
-    rDomain: DomainType;
-    cDomain: DomainType;
-    x1Domain: DomainType;
-    y1Domain: DomainType;
-    xRange: any[];
-    yRange: any[];
-    zRange: any[];
-    rRange: any[];
-    cRange: readonly string[] | string[] | undefined;
-    x1Range: XRangeWithScale<XScale> | undefined;
-    y1Range: YRangeWithScale<YScale> | undefined;
-    meta: Record<string, any>;
-    xScale: AnyScale;
-    yScale: AnyScale;
-    zScale: AnyScale;
-    rScale: AnyScale;
-    cScale: AnyScale | null;
-    x1Scale: AnyScale | null;
-    y1Scale: AnyScale | null;
-    yGet: (d: T) => any;
-    xGet: (d: T) => any;
-    zGet: (d: T) => any;
-    rGet: (d: T) => any;
-    cGet: (d: T) => any;
-    x1Get: (d: T) => any;
-    y1Get: (d: T) => any;
-    radial: boolean;
-    tooltip: TooltipContextValue<T>;
-    geo: GeoContextValue;
-    brush: BrushContextValue;
-    transform: TransformContextValue;
-};
 export type LayerChartInternalMeta = {
     /**
      * The current chart type.
@@ -95,11 +30,6 @@ export type LayerChartInternalMeta = {
      */
     type: 'default' | 'simplified-area' | 'simplified-bar' | 'simplified-line' | 'simplified-pie' | 'simplified-scatter';
 };
-export declare function getChartContext<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(): ChartContextValue<T, XScale, YScale>;
-export declare function setChartContext<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(context: ChartContextValue<T, XScale, YScale>): ChartContextValue<T, XScale, YScale>;
-export type RenderContext = 'svg' | 'canvas' | 'html';
-export declare function getRenderContext(): RenderContext;
-export declare function setRenderContext(context: RenderContext): RenderContext;
 export type ChartPropsWithoutHTML<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = {
     /**
      * Whether this chart should be rendered server side
@@ -285,19 +215,19 @@ export type ChartPropsWithoutHTML<T, XScale extends AnyScale = AnyScale, YScale
     /**
      * The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if
      * you want to override the default or you want to extra options.
-     * @default scaleLinear
+     * @default autoScale
      */
     xScale?: XScale;
     /**
      * The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if
      * you want to override the default or you want to extra options.
-     * @default scaleLinear
+     * @default autoScale
      */
     yScale?: YScale;
     /**
      * The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if
      * you want to override the default or you want to extra options.
-     * @default scaleLinear
+     * @default autoScale
      */
     zScale?: AnyScale;
     /**
@@ -309,13 +239,13 @@ export type ChartPropsWithoutHTML<T, XScale extends AnyScale = AnyScale, YScale
     /**
      * The D3 scale that should be used for the x1-dimension. Pass in an instantiated D3 scale if
      * you want to override the default or you want to extra options.
-     * @default scaleLinear
+     * @default autoScale
      */
     x1Scale?: AnyScale;
     /**
      * The D3 scale that should be used for the y1-dimension. Pass in an instantiated D3 scale if
      * you want to override the default or you want to extra options.
-     * @default scaleLinear
+     * @default autoScale
      */
     y1Scale?: AnyScale;
     /**
@@ -484,6 +414,20 @@ export type ChartPropsWithoutHTML<T, XScale extends AnyScale = AnyScale, YScale
      * @default null
      */
     yBaseline?: number | null;
+    /**
+     * Time interval to use for the x-axis when using a time scale.
+     */
+    xInterval?: TimeInterval | null;
+    /**
+     * Time interval to use for the y-axis when using a time scale.
+     */
+    yInterval?: TimeInterval | null;
+    /**
+     * The axis that represents the value dimension, typically based on the type and orientation of the chart
+     *
+     * @default 'y'
+     */
+    valueAxis?: 'x' | 'y';
     /**
      * Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.
      * Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`)
@@ -493,38 +437,120 @@ export type ChartPropsWithoutHTML<T, XScale extends AnyScale = AnyScale, YScale
      */
     radial?: boolean;
     children?: Snippet<[{
-        context: ChartContextValue<T, XScale, YScale>;
+        context: ChartState<T, XScale, YScale>;
     }]>;
     /**
      * A bindable reference to the chart context.
      */
-    context?: ChartContextValue<T, XScale, YScale>;
+    context?: ChartState<T, XScale, YScale>;
     /**
-     * Props passed to GeoContext
+     * Props passed to GeoState
      */
-    geo?: Partial<ComponentProps<typeof GeoContext>>;
+    geo?: Partial<GeoStateProps>;
     /**
      * Props passed to the `TooltipContext` component.
      */
-    tooltip?: Partial<ComponentProps<typeof TooltipContext>> | boolean;
+    tooltipContext?: Partial<ComponentProps<typeof TooltipContext>> | boolean;
+    /**
+     * Props passed to TransformContext, with optional domain-space constraints.
+     */
+    transform?: Partial<ComponentProps<typeof TransformContext>> & {
+        /**
+         * Controls which projection properties are updated by transform state in `mode: 'projection'`.
+         * Auto-detected from the projection type when not specified:
+         * - Globe projections (e.g. `geoOrthographic`): `{ rotation: true, scale: false, translate: false }`
+         * - Flat maps (e.g. `geoMercator`): `{ rotation: false, scale: true, translate: true }`
+         *
+         * `rotation` and `translate` are mutually exclusive.
+         */
+        apply?: {
+            /** Apply transform translate as projection rotation (yaw/pitch). */
+            rotation?: boolean;
+            /** Apply transform scale to projection scale. */
+            scale?: boolean;
+            /** Apply transform translate to projection translate. */
+            translate?: boolean;
+        };
+        /**
+         * Domain-space constraints for pan/zoom in `mode: 'domain'`.
+         * Expressed in data units (numbers, Dates) rather than pixel-space.
+         * Converted internally to a `constrain` function on TransformState.
+         */
+        domainExtent?: {
+            x?: {
+                /** Minimum domain value. `'data'` = initial data bounds. */
+                min?: number | Date | 'data';
+                /** Maximum domain value. `'data'` = initial data bounds. */
+                max?: number | Date | 'data';
+                /** Minimum visible range (max zoom in). In data units (e.g., ms for dates). */
+                minRange?: number;
+            };
+            y?: {
+                min?: number | Date | 'data';
+                max?: number | Date | 'data';
+                minRange?: number;
+            };
+        };
+    };
+    /** Props passed to BrushContext */
+    brush?: (Partial<ComponentProps<typeof BrushContext>> & {
+        /**
+         * Zoom the chart domain to the brushed area on brush end.
+         *
+         * @default false
+         */
+        zoomOnBrush?: boolean;
+    }) | boolean;
+    /** Series definitions for multi-series charts */
+    series?: SeriesData<T, any>[];
+    /** Layout mode for series: 'overlap', 'group', 'stack', 'stackExpand', 'stackDiverging' */
+    seriesLayout?: StackLayout | 'group';
     /**
-     * Props passed to TransformContext
+     * Padding between primary bands (e.g. bars), applied to the category axis scaleBand().padding().
+     * When set, the category axis (opposite of valueAxis) automatically uses a scaleBand with this padding.
      */
-    transform?: Partial<ComponentProps<typeof TransformContext>>;
-    /** Props passed to BrushContext */
-    brush?: Partial<ComponentProps<typeof BrushContext>> | boolean;
+    bandPadding?: number;
+    /**
+     * Padding between group/series items when using seriesLayout="group", applied to the x1/y1 scaleBand().padding().
+     * @default 0
+     */
+    groupPadding?: number;
     /**
      * A callback function that is called when the chart is resized.
      */
     onResize?: (e: ChartResizeDetail) => void;
+    /**
+     * Whether to clip overflow content.
+     * When true, sets `overflow: hidden` on the container.
+     *
+     * @default false
+     */
+    clip?: boolean;
+    /**
+     * Animate scale domain transitions with spring or tween motion.
+     * Applies to all domain changes (data updates, brush zoom, transform, etc.)
+     */
+    motion?: MotionProp;
     ondragstart?: ComponentProps<typeof TransformContext>['ondragstart'];
     ondragend?: ComponentProps<typeof TransformContext>['ondragend'];
     onTransform?: ComponentProps<typeof TransformContext>['onTransform'];
+    /** Sets width of the chart container.  Uses parent width if not set (bind:clientWidth) */
+    width?: number;
+    /** Sets height of the chart container.  Uses parent height if not set (bind:clientHeight) */
+    height?: number;
+} & ChartChildrenProps<T, XScale, YScale>;
+export type ChartProps<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = ChartPropsWithoutHTML<T, XScale, YScale> & Without<HTMLAttributes<HTMLDivElement>, ChartPropsWithoutHTML<T, XScale, YScale>>;
+declare function $$render<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(): {
+    props: ChartProps<TData, XScale, YScale>;
+    exports: {};
+    bindings: "ref" | "context";
+    slots: {};
+    events: {};
 };
 declare class __sveltets_Render<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> {
-    props(): ChartPropsWithoutHTML<TData, XScale, YScale>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<TData, XScale, YScale>>['props'];
+    events(): ReturnType<typeof $$render<TData, XScale, YScale>>['events'];
+    slots(): ReturnType<typeof $$render<TData, XScale, YScale>>['slots'];
     bindings(): "ref" | "context";
     exports(): {};
 }

package/dist/components/ChartChildren.svelte

@@ -0,0 +1,290 @@
+<script lang="ts" module>
+  import type { ComponentProps, Snippet } from 'svelte';
+  import TooltipContext from './tooltip/TooltipContext.svelte';
+  import type Tooltip from './tooltip/Tooltip.svelte';
+  import type TooltipHeader from './tooltip/TooltipHeader.svelte';
+  import type TooltipList from './tooltip/TooltipList.svelte';
+  import type TooltipItem from './tooltip/TooltipItem.svelte';
+  import type TooltipSeparator from './tooltip/TooltipSeparator.svelte';
+
+  // BaseChartProps
+  export type ChartChildrenProps<
+    TData,
+    XScale extends AnyScale = AnyScale,
+    YScale extends AnyScale = AnyScale,
+    ChartSnippet = Snippet<[{ context: ChartState<TData, XScale, YScale> }]>,
+  > = {
+    /**
+     * The axis to be used for the chart.
+     *
+     * @default true
+     */
+    axis?: ComponentProps<typeof Axis> | 'x' | 'y' | boolean | ChartSnippet;
+
+    /**
+     * The grid to be used for the chart.
+     *
+     * @default true
+     */
+    grid?: ComponentProps<typeof Grid> | boolean | ChartSnippet;
+
+    /**
+     * The labels to be used for the chart.
+     *
+     * @default false
+     */
+    labels?: ComponentProps<typeof Labels<TData>> | boolean | ChartSnippet;
+
+    /**
+     * The legend to be used for the chart.
+     *
+     * @default false
+     */
+    legend?: ComponentProps<typeof Legend> | boolean | ChartSnippet;
+
+    /**
+     * The points to be used for the chart.
+     *
+     * @default false
+     */
+    points?: ComponentProps<typeof Points> | boolean | ChartSnippet;
+
+    /**
+     * The rule to be used for the chart.
+     *
+     * @default true
+     */
+    rule?: ComponentProps<typeof Rule> | boolean | ChartSnippet;
+
+    /**
+     * The tooltip snippet to be used for the chart.
+     */
+    tooltip?: ChartSnippet;
+
+    /**
+     * Tooltip context to be used for the chart.
+     */
+    tooltipContext?: Partial<ComponentProps<typeof TooltipContext>> | boolean;
+
+    highlight?: boolean | Partial<ComponentProps<typeof Highlight>> | ChartSnippet;
+
+    /** Annotations to show on chart */
+    annotations?: ChartAnnotationsType;
+
+    /**
+     * Callback when tooltip data is clicked.
+     */
+    onTooltipClick?: (e: MouseEvent, details: { data: any }) => void;
+
+    /**
+     * Additional props to be passed to the components rendered internally by Chart components.
+     * This is useful for customizing the behavior of individual components, without having
+     * to fully override them via snippets.
+     */
+    props?: Partial<{
+      area: Partial<ComponentProps<typeof Area>>;
+      arc: Partial<ComponentProps<typeof Arc>>;
+      bars: Partial<ComponentProps<typeof Bars>>;
+      brush: Partial<ComponentProps<typeof BrushContext>>;
+      canvas: Partial<ComponentProps<typeof Canvas>>;
+      grid: Partial<ComponentProps<typeof Grid>>;
+      group: Partial<ComponentProps<typeof Group>>;
+      highlight: Partial<ComponentProps<typeof Highlight>>;
+      labels: Partial<ComponentProps<Labels<TData>>>;
+      legend: Partial<ComponentProps<typeof Legend>>;
+      line: Partial<ComponentProps<typeof Line>>;
+      pie: Partial<ComponentProps<typeof Pie>>;
+      spline: Partial<ComponentProps<typeof Spline>>;
+      points: Partial<ComponentProps<typeof Points>>;
+      rule: Partial<ComponentProps<typeof Rule>>;
+      svg: Partial<ComponentProps<typeof Svg>>;
+      tooltip: {
+        context?: Partial<ComponentProps<typeof TooltipContext>>;
+        root?: Omit<Partial<ComponentProps<typeof Tooltip>>, 'context'>;
+        header?: Partial<ComponentProps<typeof TooltipHeader>>;
+        list?: Partial<ComponentProps<typeof TooltipList>>;
+        item?: Partial<ComponentProps<typeof TooltipItem>>;
+        separator?: Partial<ComponentProps<typeof TooltipSeparator>>;
+        hideTotal?: boolean;
+      };
+      xAxis: Partial<ComponentProps<typeof Axis>>;
+      yAxis: Partial<ComponentProps<typeof Axis>>;
+    }>;
+
+    // Snippets
+    children?: ChartSnippet;
+    belowContext?: ChartSnippet;
+    belowMarks?: ChartSnippet;
+    marks?: ChartSnippet;
+    aboveMarks?: ChartSnippet;
+    aboveContext?: ChartSnippet;
+  };
+</script>
+
+<script
+  lang="ts"
+  generics="TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale"
+>
+  import Layer from './layers/Layer.svelte';
+
+  import { getChartContext, type ChartState } from '../contexts/chart.js';
+  import { getSettings } from '../contexts/settings.js';
+  import type { AnyScale } from '../utils/scales.svelte.js';
+  import { asAny } from '../utils/types.js';
+  import { getObjectOrNull } from '../utils/common.js';
+
+  import Area from './Area.svelte';
+  import Arc from './Arc.svelte';
+  import Axis from './Axis.svelte';
+  import Bars from './Bars.svelte';
+  import BrushContext from './BrushContext.svelte';
+  import ChartAnnotations from './charts/ChartAnnotations.svelte';
+  import ChartClipPath from './ChartClipPath.svelte';
+  import DefaultTooltip from './charts/DefaultTooltip.svelte';
+  import Grid from './Grid.svelte';
+  import Group from './Group.svelte';
+  import Highlight from './Highlight.svelte';
+  import Points from './Points.svelte';
+  import Labels from './Labels.svelte';
+  import Legend from './Legend.svelte';
+  import Line from './Line.svelte';
+  import Pie from './Pie.svelte';
+  import Rule from './Rule.svelte';
+  import Spline from './Spline.svelte';
+  import type { Canvas, Svg } from './index.js';
+  import type { ChartAnnotations as ChartAnnotationsType } from './charts/types.js';
+
+  const context = getChartContext<TData, XScale, YScale>();
+  const settings = getSettings();
+
+  let {
+    props = {},
+    children: childrenProp,
+    belowContext,
+    grid = true,
+    belowMarks,
+    marks,
+    aboveMarks,
+    axis = true,
+    rule = true,
+    points = false,
+    labels = false,
+    highlight = true,
+    aboveContext,
+    legend,
+    tooltip,
+    tooltipContext,
+    annotations = [],
+  }: ChartChildrenProps<TData, XScale, YScale> = $props();
+
+  let snippetProps = $derived({ context });
+  let layer = $derived(settings.layer);
+</script>
+
+{#if childrenProp}
+  {@render childrenProp(snippetProps)}
+{:else}
+  {@render belowContext?.(snippetProps)}
+
+  <Layer
+    type={layer}
+    center={context.radial}
+    {...asAny(layer === 'canvas' ? props.canvas : props.svg)}
+    debug={settings.debug}
+  >
+    {#if typeof grid === 'function'}
+      {@render grid(snippetProps)}
+    {:else if grid}
+      <Grid x={context.valueAxis === 'x' || context.radial} y={context.valueAxis === 'y' || context.radial} {...getObjectOrNull(grid)} {...props.grid} />
+    {/if}
+
+    <ChartClipPath disabled={!context.props.brush && context.transformState?.mode !== 'domain'}>
+      <ChartAnnotations {annotations} layer="below" />
+
+      {@render belowMarks?.(snippetProps)}
+      {@render marks?.(snippetProps)}
+      {@render aboveMarks?.(snippetProps)}
+    </ChartClipPath>
+
+    {#if typeof axis === 'function'}
+      {@render axis(snippetProps)}
+
+      {#if typeof rule === 'function'}
+        {@render rule(snippetProps)}
+      {:else if rule}
+        <Rule x={context.valueAxis === 'x' ? 0 : false} y={context.valueAxis === 'y' ? 0 : false} {...getObjectOrNull(rule)} {...props.rule} />
+      {/if}
+    {:else if axis}
+      {#if axis !== 'x'}
+        <!-- y-axis -->
+        <Axis
+          placement={context.radial ? 'radius' : 'left'}
+          {...getObjectOrNull(axis)}
+          {...props.yAxis}
+        />
+      {/if}
+
+      {#if axis !== 'y'}
+        <!-- x-axis -->
+        <Axis
+          placement={context.radial ? 'angle' : 'bottom'}
+          {...getObjectOrNull(axis)}
+          {...props.xAxis}
+        />
+      {/if}
+
+      {#if typeof rule === 'function'}
+        {@render rule(snippetProps)}
+      {:else if rule}
+        <Rule x={context.valueAxis === 'x' ? 0 : false} y={context.valueAxis === 'y' ? 0 : false} {...getObjectOrNull(rule)} {...props.rule} />
+      {/if}
+    {/if}
+
+    <!-- Use `full` to allow labels on edge to not be cropped (bleed into padding) -->
+    <ChartClipPath disabled={!context.props.brush && context.transformState?.mode !== 'domain'} full>
+      {#if typeof points === 'function'}
+        {@render points(snippetProps)}
+      {:else if points}
+        {#each context.series.visibleSeries as s, i (s.key)}
+          <Points
+            seriesKey={s.key}
+            stroke="var(--color-surface-100, light-dark(white, black))"
+            {...getObjectOrNull(points)}
+            {...props.points}
+          />
+        {/each}
+      {/if}
+
+      {#if typeof labels === 'function'}
+        {@render labels(snippetProps)}
+      {:else if labels}
+        {@const labelSeriesKey = typeof labels === 'object' ? labels.seriesKey : undefined}
+        {#each context.series.visibleSeries.filter((s) => !labelSeriesKey || s.key === labelSeriesKey) as s, i (s.key)}
+          <Labels seriesKey={s.key} {...getObjectOrNull(labels)} {...props.labels} />
+        {/each}
+      {/if}
+
+      {#if typeof highlight === 'function'}
+        {@render highlight(snippetProps)}
+      {:else if highlight}
+        <Highlight {...typeof highlight === 'object' ? highlight : {}} {...props.highlight} />
+      {/if}
+
+      <ChartAnnotations {annotations} layer="above" />
+    </ChartClipPath>
+  </Layer>
+
+  {@render aboveContext?.(snippetProps)}
+
+  {#if typeof legend === 'function'}
+    {@render legend(snippetProps)}
+  {:else if legend}
+    <Legend placement="bottom" {...getObjectOrNull(legend)} {...props.legend} />
+  {/if}
+
+  {#if typeof tooltip === 'function'}
+    {@render tooltip(snippetProps)}
+  {:else if tooltipContext}
+    <DefaultTooltip tooltipProps={props.tooltip} canHaveTotal />
+  {/if}
+{/if}