From 496bd0e53904fa9de228b950fb9cbb27730c61ca Mon Sep 17 00:00:00 2001
From: Conor Barnes <conorbarnes93@gmail.com>
Date: Mon, 29 Aug 2022 18:01:07 -0300
Subject: [PATCH] storybook for date distribution, grab missing things
 necessary for date distribution in spec

---
 .../src/components/DistributionChart.tsx      |  1 +
 .../src/components/SquiggleChart.tsx          |  4 ++++
 .../src/lib/distributionSpecBuilder.ts        | 20 ++++++++++++++-----
 .../src/stories/SquiggleChart.stories.mdx     | 15 ++++++++++++++
 4 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/components/DistributionChart.tsx b/packages/components/src/components/DistributionChart.tsx
index caf01e6d..b570f4e6 100644
--- a/packages/components/src/components/DistributionChart.tsx
+++ b/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) =>
diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx
index 00688512..5baae229 100644
--- a/packages/components/src/components/SquiggleChart.tsx
+++ b/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,
     };
 
diff --git a/packages/components/src/lib/distributionSpecBuilder.ts b/packages/components/src/lib/distributionSpecBuilder.ts
index 98a06a08..9f3cf02a 100644
--- a/packages/components/src/lib/distributionSpecBuilder.ts
+++ b/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,
-        update: "position ? invert('xscale', position[0]) : null",
+        value: 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')  : ''",
             },
           },
         },
diff --git a/packages/components/src/stories/SquiggleChart.stories.mdx b/packages/components/src/stories/SquiggleChart.stories.mdx
index 3c272982..3dc74761 100644
--- a/packages/components/src/stories/SquiggleChart.stories.mdx
+++ b/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>