@opendata-ai/openchart-core 7.11.0 → 8.0.0-rc.10

package/src/styles/tooltip.css

@@ -1,132 +1,126 @@
-/* ---------------------------------------------------------------------------
- * Tooltip
- * Editorial card matching the new design system: zinc surface, cyan accent,
- * Inter Variable, mono numerics. Sized for a slice tooltip that lists every
- * series at the snapped x.
- * --------------------------------------------------------------------------- */
+@layer oc.components {
+  /* ---------------------------------------------------------------------------
+   * Tooltip
+   * Editorial card matching the new design system: zinc surface, cyan accent,
+   * Inter Variable, mono numerics. Sized for a slice tooltip that lists every
+   * series at the snapped x.
+   * --------------------------------------------------------------------------- */
 
-.oc-tooltip {
-  position: absolute;
-  display: none;
-  pointer-events: none;
-  z-index: 1000;
-  background: var(--oc-tooltip-bg);
-  backdrop-filter: blur(14px);
-  border: 1px solid var(--oc-tooltip-border);
-  border-radius: var(--oc-border-radius, 4px);
-  box-shadow: var(--oc-tooltip-shadow);
-  color: var(--oc-tooltip-text);
-  font-family: var(--oc-font-family);
-  font-size: 12px;
-  padding: 0;
-  max-width: 280px;
-  min-width: 160px;
-  line-height: 1.4;
-  animation: oc-tooltip-in 120ms ease-out;
-  transition:
-    left 100ms ease-in-out,
-    top 100ms ease-in-out;
+  .oc-tooltip {
+    position: absolute;
+    display: none;
+    pointer-events: none;
+    z-index: 1000;
+    background: var(--oc-tooltip-bg);
+    backdrop-filter: blur(14px);
+    border: 1px solid var(--oc-tooltip-border);
+    border-radius: var(--oc-border-radius, 2px);
+    box-shadow: var(--oc-tooltip-shadow);
+    color: var(--oc-tooltip-text);
+    font-family: var(--oc-font-family);
+    font-size: 12px;
+    padding: 0;
+    max-width: 280px;
+    min-width: 160px;
+    line-height: 1.4;
+    animation: oc-tooltip-in 120ms ease-out;
+    transition:
+      left 100ms ease-in-out,
+      top 100ms ease-in-out;
 
-  & .oc-tooltip-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 12px 6px;
-  }
+    & .oc-tooltip-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px 6px;
+    }
 
-  & .oc-tooltip-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
+    & .oc-tooltip-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
 
-  & .oc-tooltip-title {
-    font-weight: 590;
-    font-size: 11px;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    color: var(--oc-text-muted);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+    & .oc-tooltip-title {
+      font-weight: 590;
+      font-size: 11px;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      color: var(--oc-text-muted);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
-  & .oc-tooltip-body {
-    padding: 6px 12px 10px;
-    border-top: 1px solid var(--oc-tooltip-border);
-  }
+    & .oc-tooltip-body {
+      padding: 6px 12px 10px;
+      border-top: 1px solid var(--oc-tooltip-border);
+    }
 
-  /* No separator when body is the only child */
-  & .oc-tooltip-body:first-child {
-    border-top: none;
-    padding-top: 10px;
-  }
+    /* No separator when body is the only child */
+    & .oc-tooltip-body:first-child {
+      border-top: none;
+      padding-top: 10px;
+    }
 
-  & .oc-tooltip-row {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 16px;
-    padding: 2px 0;
-  }
+    & .oc-tooltip-row {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 16px;
+      padding: 2px 0;
+    }
 
-  & .oc-tooltip-row-swatch {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    margin-right: 6px;
-    flex-shrink: 0;
-    transform: translateY(-1px);
-  }
+    & .oc-tooltip-row-swatch {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      margin-right: 6px;
+      flex-shrink: 0;
+      transform: translateY(-1px);
+    }
 
-  & .oc-tooltip-label {
-    color: var(--oc-text-secondary);
-    font-size: 12px;
-    font-weight: 400;
-    white-space: nowrap;
-    flex-shrink: 0;
-    display: inline-flex;
-    align-items: center;
-  }
+    & .oc-tooltip-label {
+      color: var(--oc-text-secondary);
+      font-size: 12px;
+      font-weight: 400;
+      white-space: nowrap;
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+    }
 
-  & .oc-tooltip-value {
-    font-weight: 510;
-    font-size: 12px;
-    font-variant-numeric: tabular-nums;
-    color: var(--oc-tooltip-text);
-    text-align: right;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    & .oc-tooltip-value {
+      font-weight: 510;
+      font-size: 12px;
+      font-variant-numeric: tabular-nums;
+      color: var(--oc-tooltip-text);
+      text-align: right;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
-}
 
-/* ---------------------------------------------------------------------------
- * Crosshair guideline + per-series snap dots (line/area charts)
- * Animate the snap between adjacent points so the indicator slides instead
- * of jumping. ~50ms ease-in-out keeps the motion crisp without lagging.
- * --------------------------------------------------------------------------- */
+  /* ---------------------------------------------------------------------------
+   * Crosshair guideline + per-series snap dots (line/area charts)
+   * Animate the snap between adjacent points so the indicator slides instead
+   * of jumping. ~50ms ease-in-out keeps the motion crisp without lagging.
+   * --------------------------------------------------------------------------- */
 
-.oc-crosshair {
-  pointer-events: none;
-  transition:
-    x1 50ms ease-in-out,
-    x2 50ms ease-in-out;
-}
-
-.oc-snap-dots circle {
-  pointer-events: none;
-  transition:
-    cx 50ms ease-in-out,
-    cy 50ms ease-in-out;
-}
+  .oc-crosshair {
+    pointer-events: none;
+    transition:
+      x1 50ms ease-in-out,
+      x2 50ms ease-in-out;
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .oc-tooltip,
-  .oc-crosshair,
   .oc-snap-dots circle {
-    transition: none;
+    pointer-events: none;
+    transition:
+      cx 50ms ease-in-out,
+      cy 50ms ease-in-out;
   }
 }

package/src/styles/you-draw-it.css

@@ -0,0 +1,126 @@
+@layer oc.components {
+  /* ---------------------------------------------------------------------------
+   * You draw it (youDrawIt)
+   *
+   * NYT-style draw-then-reveal. SVG-space elements (hatched region, guess path,
+   * reveal clip) render inside the chart SVG; the prompt + skip-to-reveal button
+   * are an absolutely-positioned HTML overlay the vanilla adapter sizes over the
+   * drawing region (inline left/top/width/height). All colors come from --oc-*
+   * tokens so they flip in .oc-dark.
+   * --------------------------------------------------------------------------- */
+
+  /* Hatched "draw here" region. Fill comes from an SVG <pattern> (line color =
+   * the target series color); this only governs overall opacity + fade-out. */
+  .oc-ydi-region {
+    opacity: 0.35;
+    transition: opacity 0.4s ease;
+  }
+
+  .oc-ydi-region[data-ydi-hidden="true"] {
+    opacity: 0;
+  }
+
+  /* The vertical rule at `from` where drawing begins. */
+  .oc-ydi-boundary {
+    stroke: var(--oc-text-muted);
+    stroke-width: 1;
+    stroke-dasharray: 3 3;
+    stroke-opacity: 0.6;
+  }
+
+  /* Reader's guess: a distinct pen-like stroke that reads as "yours" against the
+   * solid real line. Dashed + focus-blue so it stays legible in both modes. */
+  .oc-ydi-guess {
+    stroke: var(--oc-focus);
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-dasharray: 1 6;
+  }
+
+  /* Host-supplied comparison line ("what everyone else guessed"). Muted so it
+   * sits behind the reader's guess and the real line. */
+  .oc-ydi-comparison {
+    stroke: var(--oc-text-muted);
+    stroke-width: 1.5;
+    stroke-opacity: 0.5;
+    stroke-dasharray: 4 4;
+  }
+
+  /* Reveal clip rect: the width animates from the `from` boundary to the full
+   * area on reveal, wiping the real line in left-to-right. The vanilla adapter
+   * adds .oc-ydi-clip-animate right before setting the final width; reduced
+   * motion skips the class so the width snaps. */
+  .oc-ydi-clip-rect.oc-ydi-clip-animate {
+    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  /* HTML controls overlay: prompt (top) + reveal button (bottom-right). */
+  .oc-ydi-controls {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-end;
+    pointer-events: none;
+    font-family: var(--oc-font-family);
+    padding: 8px;
+    box-sizing: border-box;
+    z-index: 10;
+  }
+
+  .oc-ydi-prompt {
+    align-self: center;
+    max-width: 100%;
+    padding: 6px 12px;
+    border-radius: 6px;
+    background: var(--oc-card);
+    border: 1px solid var(--oc-border);
+    color: var(--oc-text-secondary);
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 16px;
+    text-align: center;
+    box-shadow: var(--oc-tooltip-shadow);
+  }
+
+  .oc-ydi-controls.oc-ydi-revealed .oc-ydi-prompt {
+    display: none;
+  }
+
+  /* Skip-to-reveal button. pointer-events re-enabled (the overlay disables it)
+   * so it stays clickable and keyboard-reachable. Min height enforced inline by
+   * the adapter (>= 24px effective touch target). */
+  .oc-ydi-reveal-button {
+    pointer-events: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 14px;
+    border: 1px solid var(--oc-border);
+    border-radius: 6px;
+    background: var(--oc-bg);
+    color: var(--oc-text);
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    box-shadow: var(--oc-tooltip-shadow);
+    transition:
+      background-color 0.15s,
+      border-color 0.15s;
+  }
+
+  .oc-ydi-reveal-button:hover {
+    background: var(--oc-hover-bg);
+  }
+
+  .oc-ydi-reveal-button:focus-visible {
+    outline: 2px solid var(--oc-focus);
+    outline-offset: 2px;
+  }
+
+  .oc-ydi-reveal-button:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+}

package/src/types/__tests__/encoding.test.ts

@@ -27,7 +27,7 @@ function getOptionalChannels(markType: MarkType): string[] {
 // ---------------------------------------------------------------------------
 
 describe('MARK_ENCODING_RULES', () => {
-  it('has entries for all 11 mark types', () => {
+  it('has entries for all 16 mark types', () => {
     const expectedTypes: MarkType[] = [
       'bar',
       'line',
@@ -40,6 +40,11 @@ describe('MARK_ENCODING_RULES', () => {
       'tick',
       'rect',
       'lollipop',
+      'beeswarm',
+      'range',
+      'waffle',
+      'calendar',
+      'parliament',
     ];
     for (const type of expectedTypes) {
       expect(MARK_ENCODING_RULES[type]).toBeDefined();
@@ -67,21 +72,21 @@ describe('bar encoding rules', () => {
     expect(getOptionalChannels('bar')).toContain('y2');
   });
 
-  it('supports opacity, tooltip, href, order, detail', () => {
+  it('supports opacity, tooltip, detail', () => {
     const optionals = getOptionalChannels('bar');
     expect(optionals).toContain('opacity');
     expect(optionals).toContain('tooltip');
-    expect(optionals).toContain('href');
-    expect(optionals).toContain('order');
     expect(optionals).toContain('detail');
   });
 
-  it('does not support shape, strokeDash, text, theta, radius', () => {
+  it('does not support shape, strokeDash, text, theta, href, order, radius', () => {
     const channels = getChannelNames('bar');
     expect(channels).not.toContain('shape');
     expect(channels).not.toContain('strokeDash');
     expect(channels).not.toContain('text');
     expect(channels).not.toContain('theta');
+    expect(channels).not.toContain('href');
+    expect(channels).not.toContain('order');
     expect(channels).not.toContain('radius');
   });
 });
@@ -108,6 +113,12 @@ describe('line encoding rules', () => {
     expect(channels).not.toContain('x2');
     expect(channels).not.toContain('y2');
   });
+
+  it('does not support href or order (removed dead channels)', () => {
+    const channels = getChannelNames('line');
+    expect(channels).not.toContain('href');
+    expect(channels).not.toContain('order');
+  });
 });
 
 describe('point encoding rules', () => {
@@ -122,8 +133,8 @@ describe('point encoding rules', () => {
     }
   });
 
-  it('supports shape as optional', () => {
-    expect(getOptionalChannels('point')).toContain('shape');
+  it('does not support shape (removed dead channel)', () => {
+    expect(getChannelNames('point')).not.toContain('shape');
   });
 
   it('supports size as optional quantitative', () => {
@@ -134,18 +145,18 @@ describe('point encoding rules', () => {
 });
 
 describe('arc encoding rules', () => {
-  it('requires y (quantitative) and color (nominal/ordinal)', () => {
+  it('requires theta (quantitative) and color (nominal/ordinal)', () => {
     const rules = MARK_ENCODING_RULES.arc;
-    expect(rules.y.required).toBe(true);
-    expect(rules.y.allowedTypes).toContain('quantitative');
+    expect(rules.theta.required).toBe(true);
+    expect(rules.theta.allowedTypes).toContain('quantitative');
     expect(rules.color.required).toBe(true);
     expect(rules.color.allowedTypes).toContain('nominal');
   });
 
-  it('supports theta and radius as optional', () => {
+  it('supports y as optional deprecated alias (radius was removed)', () => {
     const optionals = getOptionalChannels('arc');
-    expect(optionals).toContain('theta');
-    expect(optionals).toContain('radius');
+    expect(optionals).toContain('y');
+    expect(getChannelNames('arc')).not.toContain('radius');
   });
 });
 
@@ -188,11 +199,10 @@ describe('tick encoding rules', () => {
     expect(getRequiredChannels('tick')).toContain('y');
   });
 
-  it('supports opacity, tooltip, href, detail', () => {
+  it('supports opacity, tooltip, detail', () => {
     const optionals = getOptionalChannels('tick');
     expect(optionals).toContain('opacity');
     expect(optionals).toContain('tooltip');
-    expect(optionals).toContain('href');
     expect(optionals).toContain('detail');
   });
 });
@@ -203,12 +213,11 @@ describe('rect encoding rules', () => {
     expect(getRequiredChannels('rect')).toContain('y');
   });
 
-  it('supports x2, y2, opacity, order', () => {
+  it('supports x2, y2, opacity', () => {
     const optionals = getOptionalChannels('rect');
     expect(optionals).toContain('x2');
     expect(optionals).toContain('y2');
     expect(optionals).toContain('opacity');
-    expect(optionals).toContain('order');
   });
 });
 
@@ -229,6 +238,51 @@ describe('lollipop encoding rules', () => {
   });
 });
 
+describe('beeswarm encoding rules', () => {
+  it('marks both axes optional (the compiler enforces the combination)', () => {
+    const rules = MARK_ENCODING_RULES.beeswarm;
+    expect(rules.x.required).toBe(false);
+    expect(rules.y.required).toBe(false);
+  });
+
+  it('accepts quantitative and nominal/ordinal on both axes', () => {
+    const rules = MARK_ENCODING_RULES.beeswarm;
+    for (const axis of [rules.x, rules.y]) {
+      expect(axis.allowedTypes).toContain('quantitative');
+      expect(axis.allowedTypes).toContain('nominal');
+      expect(axis.allowedTypes).toContain('ordinal');
+    }
+  });
+
+  it('supports optional size (quantitative) for sized dots', () => {
+    const rules = MARK_ENCODING_RULES.beeswarm;
+    expect(rules.size.required).toBe(false);
+    expect(rules.size.allowedTypes).toEqual(['quantitative']);
+  });
+});
+
+describe('waffle encoding rules', () => {
+  it('requires a quantitative y (the share value) and a categorical color', () => {
+    const rules = MARK_ENCODING_RULES.waffle;
+    expect(rules.y.required).toBe(true);
+    expect(rules.y.allowedTypes).toEqual(['quantitative']);
+    expect(rules.color.required).toBe(true);
+    expect(rules.color.allowedTypes).toContain('nominal');
+    expect(rules.color.allowedTypes).toContain('ordinal');
+  });
+
+  it('accepts theta as an optional quantitative channel (arc parity)', () => {
+    const rules = MARK_ENCODING_RULES.waffle;
+    expect(rules.theta?.required).toBe(false);
+    expect(rules.theta?.allowedTypes).toEqual(['quantitative']);
+  });
+
+  it('does not require positional x (no axes)', () => {
+    const rules = MARK_ENCODING_RULES.waffle;
+    expect(rules.x.required).toBe(false);
+  });
+});
+
 describe('common channels across marks', () => {
   it('tooltip is optional on all mark types', () => {
     const allTypes: MarkType[] = [
@@ -243,6 +297,11 @@ describe('common channels across marks', () => {
       'tick',
       'rect',
       'lollipop',
+      'beeswarm',
+      'range',
+      'waffle',
+      'calendar',
+      'parliament',
     ];
     for (const type of allTypes) {
       const rules = MARK_ENCODING_RULES[type];
@@ -265,6 +324,11 @@ describe('common channels across marks', () => {
       'tick',
       'rect',
       'lollipop',
+      'beeswarm',
+      'range',
+      'waffle',
+      'calendar',
+      'parliament',
     ];
     for (const type of allTypes) {
       const rules = MARK_ENCODING_RULES[type];
@@ -287,6 +351,11 @@ describe('common channels across marks', () => {
       'tick',
       'rect',
       'lollipop',
+      'beeswarm',
+      'range',
+      'waffle',
+      'calendar',
+      'parliament',
     ];
     for (const type of allTypes) {
       const rules = MARK_ENCODING_RULES[type];

package/src/types/__tests__/spec.test.ts

@@ -8,7 +8,6 @@ import type {
   VizSpec,
 } from '../spec';
 import {
-  CHART_TYPES,
   isChartSpec,
   isGraphSpec,
   isRangeAnnotation,
@@ -139,8 +138,8 @@ describe('type guard mutual exclusivity', () => {
 // ---------------------------------------------------------------------------
 
 describe('MARK_TYPES', () => {
-  it('contains all 11 mark types', () => {
-    expect(MARK_TYPES.size).toBe(11);
+  it('contains all 16 mark types', () => {
+    expect(MARK_TYPES.size).toBe(16);
   });
 
   it('contains expected types', () => {
@@ -156,6 +155,11 @@ describe('MARK_TYPES', () => {
       'tick',
       'rect',
       'lollipop',
+      'beeswarm',
+      'range',
+      'waffle',
+      'calendar',
+      'parliament',
     ];
     for (const t of expected) {
       expect(MARK_TYPES.has(t)).toBe(true);
@@ -167,10 +171,6 @@ describe('MARK_TYPES', () => {
     expect(MARK_TYPES.has('graph')).toBe(false);
     expect(MARK_TYPES.has('map')).toBe(false);
   });
-
-  it('CHART_TYPES is an alias for MARK_TYPES', () => {
-    expect(CHART_TYPES).toBe(MARK_TYPES);
-  });
 });
 
 // ---------------------------------------------------------------------------
@@ -424,13 +424,13 @@ describe('type-level spec construction', () => {
 
 describe('type-level rejection', () => {
   it('compiles with @ts-expect-error annotations intact (runtime no-op)', () => {
-    // Arc requires y + color. Missing color must error.
+    // Arc requires theta + color. Missing color must error.
     const _arcMissingColor: ChartSpec = {
       mark: 'arc',
       data: [],
       // @ts-expect-error ArcEncoding requires color channel
       encoding: {
-        y: { field: 'value', type: 'quantitative' },
+        theta: { field: 'value', type: 'quantitative' },
       },
     };
 
@@ -464,10 +464,14 @@ describe('type-level rejection', () => {
       },
     };
 
-    // Arc without theta must compile (theta is optional per MARK_ENCODING_RULES).
-    const _arcNoTheta: ChartSpec = {
+    // Arc with only the deprecated y alias (no theta) must error: ArcEncoding
+    // requires theta, the canonical value channel in v8. y is still accepted
+    // at runtime (spec-sugar expands it into theta with a warning), but the
+    // type no longer allows authoring it directly.
+    const _arcDeprecatedYOnly: ChartSpec = {
       mark: 'arc',
       data: [],
+      // @ts-expect-error ArcEncoding requires theta; y alone is not enough
       encoding: {
         y: { field: 'value', type: 'quantitative' },
         color: { field: 'category', type: 'nominal' },
@@ -488,7 +492,7 @@ describe('type-level rejection', () => {
     void _textMissingText;
     void _typoField;
     void _validTyped;
-    void _arcNoTheta;
+    void _arcDeprecatedYOnly;
     void _untypedSpec;
     expect(true).toBe(true);
   });