Feat: Add dimension label and percent of total to charts

web-common/src/components/data-graphic/marks/DelayedLabel.svelte

@@ -36,4 +36,6 @@
   });
 </script>
 
-<slot visibility={showLabel ? "visible" : "hidden"} />
+<slot
+  visibility={isDimension ? (showLabel ? "visible" : "hidden") : "visible"}
+/>

web-common/src/components/data-graphic/marks/MultiMetricMouseoverLabel.svelte

@@ -15,6 +15,7 @@ It is probably not the most up to date code; but it works very well in practice.
   interface Point {
     x: number;
     y: number;
+    value: string;
     label: string;
     key: string;
     valueColorClass?: string;
@@ -57,7 +58,8 @@ It is probably not the most up to date code; but it works very well in practice.
   let containerWidths = [];
   // let labelWidth = 0;
 
-  $: fanOutLabels = !isDimension || false;
+  let fanOutLabels = true;
+
   // update locations.
   $: nonOverlappingLocations = preventVerticalOverlap(
     point.map((p) => ({
@@ -135,6 +137,7 @@ It is probably not the most up to date code; but it works very well in practice.
   }
 
   let labelWidth = 0;
+  /** the full text width */
   let transitionalTimeoutForCalculatingLabelWidth;
 
   $: if (container && locations && $xScale && $yScale) {
@@ -206,12 +209,15 @@ It is probably not the most up to date code; but it works very well in practice.
                     {visibility}
                   >
                     {#if !location?.yOverride}
-                      {formatValue(location.y)}
+                      {location.value
+                        ? location.value
+                        : formatValue(location.y)}
                     {/if}
                   </tspan>
 
                   <tspan
                     dy=".35em"
+                    dx="0.4em"
                     y={y.label}
                     x={xText - (location?.yOverride ? labelWidth : 0)}
                     {visibility}
@@ -231,6 +237,7 @@ It is probably not the most up to date code; but it works very well in practice.
                 {:else}
                   <tspan
                     dy=".35em"
+                    dx="-0.4em"
                     y={y.label}
                     x={xText - (location?.yOverride ? 0 : labelWidth)}
                     {visibility}
@@ -258,7 +265,9 @@ It is probably not the most up to date code; but it works very well in practice.
                     {visibility}
                   >
                     {#if !location?.yOverride}
-                      {formatValue(location.y)}
+                      {location.value
+                        ? location.value
+                        : formatValue(location.y)}
                     {/if}
                   </tspan>
                 {/if}
@@ -293,5 +302,12 @@ It is probably not the most up to date code; but it works very well in practice.
     paint-order: stroke;
     stroke: white;
     stroke-width: 3px;
+    white-space: pre-wrap;
+    /* Make all characters and numbers of equal width for easy scanibility */
+    font-feature-settings: "case" 0, "cpsp" 0, "dlig" 0, "frac" 0, "dnom" 0,
+      "numr" 0, "salt" 0, "subs" 0, "sups" 0, "tnum", "zero" 0, "ss01", "ss02" 0,
+      "ss03" 0, "ss04" 0, "cv01" 0, "cv02" 0, "cv03" 0, "cv04" 0, "cv05" 0,
+      "cv06" 0, "cv07" 0, "cv08" 0, "cv09" 0, "cv10" 0, "cv11" 0, "calt", "ccmp",
+      "kern";
   }
 </style>

web-common/src/features/dashboards/state-managers/selectors/measures.ts

@@ -18,9 +18,24 @@ export const visibleMeasures = ({
   return measures === undefined ? [] : measures;
 };
 
+export const isMeasureValidPercentOfTotal = ({
+  metricsSpecQueryResult,
+}: DashboardDataSources): ((measureName: string) => boolean) => {
+  return (measureName: string) => {
+    const measures = metricsSpecQueryResult.data?.measures;
+    const selectedMeasure = measures?.find((m) => m.name === measureName);
+    return selectedMeasure?.validPercentOfTotal ?? false;
+  };
+};
+
 export const measureSelectors = {
   /**
    * Gets all visible measures in the dashboard.
    */
   visibleMeasures,
+
+  /**
+   * Checks if the provided measure is a valid percent of total
+   */
+  isMeasureValidPercentOfTotal,
 };

web-common/src/features/dashboards/time-series/DimensionValueMouseover.svelte

@@ -1,16 +1,32 @@
 <script lang="ts">
   import WithGraphicContexts from "@rilldata/web-common/components/data-graphic/functional-components/WithGraphicContexts.svelte";
+  import type { NumericPlotPoint } from "@rilldata/web-common/components/data-graphic/functional-components/types";
   import MultiMetricMouseoverLabel from "@rilldata/web-common/components/data-graphic/marks/MultiMetricMouseoverLabel.svelte";
   import { bisectData } from "@rilldata/web-common/components/data-graphic/utils";
-  import { mean } from "d3-array";
-  export let point;
-  export let xAccessor;
-  export let yAccessor;
+  import type { DimensionDataItem } from "@rilldata/web-common/features/dashboards/time-series/multiple-dimension-queries";
+  export let point: NumericPlotPoint;
+  export let xAccessor: string;
+  export let yAccessor: string;
   export let mouseoverFormat;
-  export let dimensionData;
-  export let dimensionValue;
+  export let dimensionData: DimensionDataItem[];
+  export let dimensionValue: string | undefined;
+  export let validPercTotal: number | null;
+  export let hovered: boolean | undefined;
 
-  $: x = point[xAccessor];
+  $: x = point?.[xAccessor];
+
+  function truncate(str) {
+    const truncateLength = 34;
+
+    if (str.length > truncateLength) {
+      // Check if last character is space
+      if (str[truncateLength - 1] === " ") {
+        return str.slice(0, truncateLength - 1) + "...";
+      }
+      return str.slice(0, truncateLength) + "...";
+    }
+    return str;
+  }
 
   let pointsData = dimensionData;
   $: if (dimensionValue !== undefined) {
@@ -29,27 +45,30 @@
     };
   });
 
-  let lastAvailableCurrentY = 0;
-  $: if (yValues.length) {
-    lastAvailableCurrentY = mean(yValues, (d) => d.y);
-  }
-
   $: points = yValues
     .map((dimension) => {
       const y = dimension.y;
       const currentPointIsNull = y === null;
+      let value = mouseoverFormat(y);
+      if (validPercTotal) {
+        const percOfTotal = y / validPercTotal;
+        value =
+          mouseoverFormat(y) + ",  " + (percOfTotal * 100).toFixed(2) + "%";
+      }
       return {
         x,
-        y: currentPointIsNull ? lastAvailableCurrentY : y,
+        y,
+        value,
         yOverride: currentPointIsNull,
         yOverrideLabel: "no current data",
         yOverrideStyleClass: `fill-gray-600 italic`,
         key: dimension.name,
-        label: "",
+        label: hovered ? truncate(dimension.name) : "",
         pointColorClass: dimension.fillClass,
-        valueStyleClass: "font-semibold",
+        valueStyleClass: "font-bold",
         valueColorClass: "fill-gray-600",
-        labelColorClass: dimension.fillClass,
+        labelColorClass: "fill-gray-600",
+        labelStyleClass: "font-semibold",
       };
     })
     .filter((d) => !d.yOverride);
@@ -63,7 +82,7 @@
     <MultiMetricMouseoverLabel
       isDimension={true}
       attachPointToLabel
-      direction="right"
+      direction="left"
       flipAtEdge="body"
       formatValue={mouseoverFormat}
       point={pointSet || []}

web-common/src/features/dashboards/time-series/MeasureChart.svelte

@@ -56,7 +56,7 @@
   export let labelAccessor = "label";
   export let yAccessor = "value";
   export let mouseoverValue;
-  export let hovered = false;
+  export let validPercTotal: number | null = null;
 
   // control point for scrub functionality.
   export let isScrubbing = false;
@@ -69,10 +69,10 @@
   $: mouseoverFormat = createMeasureValueFormatter<null | undefined>(measure);
   $: numberKind = numberKindForMeasure(measure);
 
-  export let tweenProps = { duration: 400, easing: cubicOut };
-
+  const tweenProps = { duration: 400, easing: cubicOut };
   const xScale = getContext(contexts.scale("x")) as ScaleStore;
 
+  let hovered: boolean | undefined = false;
   let scrub;
   let cursorClass;
   let preventScrubReset;
@@ -296,7 +296,9 @@
                   {yAccessor}
                   {dimensionData}
                   dimensionValue={$tableInteractionStore?.dimensionValue}
+                  {validPercTotal}
                   {mouseoverFormat}
+                  {hovered}
                 />
               {:else}
                 <MeasureValueMouseover

web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte

@@ -12,6 +12,7 @@
     metricsExplorerStore,
     useDashboardStore,
   } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores";
+  import { LeaderboardContextColumn } from "@rilldata/web-common/features/dashboards/leaderboard-context-column";
   import { useTimeControlStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
   import { chartInteractionColumn } from "@rilldata/web-common/features/dashboards/time-dimension-details/time-dimension-data-store";
   import BackToOverview from "@rilldata/web-common/features/dashboards/time-series/BackToOverview.svelte";
@@ -33,12 +34,17 @@
   export let workspaceWidth: number;
 
   $: dashboardStore = useDashboardStore(metricViewName);
-
   $: instanceId = $runtime.instanceId;
 
   // query the `/meta` endpoint to get the measures and the default time grain
   $: metaQuery = useMetaQuery(instanceId, metricViewName);
 
+  const {
+    selectors: {
+      measures: { isMeasureValidPercentOfTotal },
+    },
+  } = getStateManagers();
+
   $: showHideMeasures = createShowHideMeasuresStore(metricViewName, metaQuery);
 
   const timeControlsStore = useTimeControlStore(getStateManagers());
@@ -52,6 +58,9 @@
     $timeControlsStore.minTimeGrain;
   $: isScrubbing = $dashboardStore?.selectedScrubRange?.isScrubbing;
 
+  $: isPercOfTotalAsContextColumn =
+    $dashboardStore?.leaderboardContextColumn ===
+    LeaderboardContextColumn.PERCENT;
   $: includedValuesForDimension =
     $dashboardStore?.filters?.include?.find(
       (filter) => filter.name === comparisonDimension
@@ -238,6 +247,7 @@
       <!-- for bigNum, catch nulls and convert to undefined.  -->
       {@const bigNum = totals?.[measure.name] ?? undefined}
       {@const comparisonValue = totalsComparisons?.[measure.name]}
+      {@const isValidPercTotal = $isMeasureValidPercentOfTotal(measure.name)}
       {@const comparisonPercChange =
         comparisonValue && bigNum !== undefined && bigNum !== null
           ? (bigNum - comparisonValue) / comparisonValue
@@ -282,6 +292,9 @@
             xMin={startValue}
             xMax={endValue}
             {showComparison}
+            validPercTotal={isPercOfTotalAsContextColumn && isValidPercTotal
+              ? bigNum
+              : null}
             mouseoverTimeFormat={(value) => {
               /** format the date according to the time grain */
               return new Date(value).toLocaleDateString(