storybook for date distribution, grab missing things necessary for date distribution in spec

packages/components/src/components/DistributionChart.tsx

@@ -57,6 +57,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
     actions = false,
     xAxis = "number",
   } = props;
+  console.log({ plot });
   const [sized] = useSize((size) => {
     const shapes = flattenResult(
       plot.distributions.map((x) =>

packages/components/src/components/SquiggleChart.tsx

@@ -51,6 +51,8 @@ export interface SquiggleChartProps {
   minX?: number;
   /** Specify the upper bound of the x scale */
   maxX?: number;
+  /** Whether the x-axis should be dates or numbers */
+  xAxis?: "number" | "dateTime";
   /** Whether to show vega actions to the user, so they can copy the chart spec */
   distributionChartActions?: boolean;
   enableLocalSettings?: boolean;
@@ -79,6 +81,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
     maxX,
     color,
     title,
+    xAxis = "number",
     distributionChartActions,
     enableLocalSettings = false,
   }) => {
@@ -100,6 +103,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = React.memo(
       maxX,
       color,
       title,
+      xAxis,
       actions: distributionChartActions,
     };
 

packages/components/src/lib/distributionSpecBuilder.ts

@@ -77,7 +77,6 @@ export function buildVegaSpec(
   specOptions: DistributionChartSpecOptions
 ): VisualizationSpec {
   const {
-    format = defaultTickFormat,
     title,
     minX,
     maxX,
@@ -89,6 +88,13 @@ export function buildVegaSpec(
 
   const dateTime = xAxis === "dateTime";
 
+  // some fallbacks
+  const format = specOptions?.format
+    ? specOptions.format
+    : dateTime
+    ? timeTickFormat
+    : defaultTickFormat;
+
   let xScale = dateTime ? timeXScale : logX ? logXScale : linearXScale;
 
   if (minX !== undefined && Number.isFinite(minX)) {
@@ -125,8 +131,10 @@ export function buildVegaSpec(
       },
       {
         name: "position_scaled",
-        value: 0,
+        value: null,
-        update: "position ? invert('xscale', position[0]) : null",
+        update: "isArray(position) ? invert('xscale', position[0]) : ''",
+        // value: 0,
+        // update: "position ? invert('xscale', position[0]) : null",
       },
     ],
     scales: [
@@ -152,7 +160,7 @@ export function buildVegaSpec(
         domainColor: "#fff",
         domainOpacity: 0.0,
         format: format,
-        tickCount: 10,
+        tickCount: dateTime ? 3 : 10,
         labelOverlap: "greedy",
       },
     ],
@@ -308,7 +316,9 @@ export function buildVegaSpec(
           },
           update: {
             text: {
-              signal: "position_scaled ? format(position_scaled, ',.4r')  : ''",
+              signal: dateTime
+                ? "position_scaled ? utcyear(position_scaled) + '-' + utcmonth(position_scaled) + '-' + utcdate(position_scaled) + 'T' + utchours(position_scaled)+':' +utcminutes(position_scaled) : ''"
+                : "position_scaled ? format(position_scaled, ',.4r')  : ''",
             },
           },
         },

packages/components/src/stories/SquiggleChart.stories.mdx

@@ -79,6 +79,21 @@ could be continuous, discrete or mixed.
   </Story>
 </Canvas>
 
+### Date Distribution
+
+<Canvas>
+  <Story
+    name="Date Distribution"
+    args={{
+      code: "mx(10^12, 10^12 + 10^11, 10^12 + 2 * 10^11)",
+      width,
+      xAxis: "dateTime",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
 ## Mixed distributions
 
 <Canvas>