@malloydata/render 0.0.210-dev241107210431 → 0.0.210-dev241111185044

package/.storybook/main.ts

@@ -58,11 +58,13 @@ const config: StorybookConfig = {
         },
       },
       server: {
-        // Disable HMR for now, as we can't seem to get malloy core nor Lit to fully support it
+        // Disable HMR for now, as we can't seem to get malloy core nor web component to fully support it
         hmr: false,
       },
       define: {
-        'process.env': {},
+        'process.env': {
+          'IS_STORYBOOK': true,
+        },
       },
       assetsInclude: ['/sb-preview/runtime.js'],
       plugins: [viteMalloyStoriesPlugin()],

package/DEVELOPING.md

@@ -75,6 +75,44 @@ Renderers are applied based on tags parsed on an Explore or Field. This is done
 1. Update the `shouldRenderAs` function that looks at the field tags and returns an enum for your renderer type
 2. Update the switch statement in the `applyRenderer` function to add a case for your new renderer. Your case statement should update the `renderValue` variable using your renderer.
 
+## Adding component CSS
+
+The renderer is shipped as webcomponent, and any stylesheets should be appended to the ShadowDOM root instead of to the document. A utility is provided for doing this like so:
+
+```typescript
+// in file my-component.ts
+
+// import your stylesheet as a string
+import myCss from "./style.css?raw";
+
+export function MyComponent() {
+  // Add your imported CSS to the ShadowRoot
+  const config = useConfig();
+  config.addCSSToShadowRoot(myCSS);
+
+  // Use your classes in your markup
+  return <div class="my-component-class">hello world</div>
+}
+```
+
+There are certain cases where you may need to append CSS to the document; for example, when rendering a tooltip or modal that is attached to the DOM outside of the web component. You can add this document CSS like so:
+
+```typescript
+// in file my-component.ts
+
+// import your stylesheet as a string
+import myCss from "./style.css?raw";
+
+export function MyComponent() {
+  // Add your imported CSS to the document
+  const config = useConfig();
+  config.addCSSToDocument(myCSS);
+
+  // Use your classes in your markup
+  return <div class="my-component-class">hello world</div>
+}
+```
+
 ## Renderer Metadata
 
 Some of the renderers, especially charts, benefit from having metadata about the data table being rendered. This can include attributes like the min and max values in a numeric column, the number of rows in a nested table, etc. This metadata is derived in `src/component/render-result-metadata.ts`. The `getResultMetadata` function is used to create the `RenderResultMetadata` object. This object is shared throughout our SolidJS component tree using the Context api. To access the metadata, use the `useResultContext()` method in a component.
@@ -118,10 +156,18 @@ For examples of how to use brushIn data and export brushOut data, see the bar ch
 
 ## Debugging tips
 
-TODO
+In the Storybook, hovering any of the new charts will show a debug icon in the top right. Clicking the debug icon will open that chart with a text editor of the spec and a signal and data inspector. This UI can be used to see what is happening under the hood with the Vega chart, and allow you to experiment with changing the spec.
 
-- signal logging
-- vega introspection
+You can also use the signal logger utility to log signal changes. This can be done in `chart.tsx` or `vega-chart.tsx` like so:
+
+```typescript
+import {signalLogger} from './vega-utils';
+
+// Somewhere in component code where View is accessible, create logger and log some signals
+const logger = signalLogger(view, optionalId); // Optional string id which will be logged as well
+
+logger('signalA', 'signalB'); // Logs any value changes to signalA or signalB
+```
 
 ## Generating builds
 

package/dist/component/chart/chart-dev-tool.d.ts

@@ -0,0 +1,6 @@
+import { ChartProps } from './chart';
+type ChartDevToolProps = {
+    onClose: () => void;
+} & ChartProps;
+export default function ChartDevTool(props: ChartDevToolProps): import("solid-js").JSX.Element;
+export {};

package/dist/component/chart/chart.d.ts

@@ -1,7 +1,13 @@
+/// <reference path="../../../src/vega.d.ts" />
 import { Explore, ExploreField, QueryData } from '@malloydata/malloy';
 import { RenderResultMetadata } from '../types';
-export declare function Chart(props: {
+import { Runtime, View } from 'vega';
+export type ChartProps = {
     field: Explore | ExploreField;
     data: QueryData;
     metadata: RenderResultMetadata;
-}): import("solid-js").JSX.Element;
+    devMode?: boolean;
+    runtime?: Runtime;
+    onView?: (view: View) => void;
+};
+export declare function Chart(props: ChartProps): import("solid-js").JSX.Element;

package/dist/component/chart/debug_icon.d.ts

@@ -0,0 +1 @@
+export declare function DebugIcon(): import("solid-js").JSX.Element;

package/dist/component/chart-layout-settings.d.ts

@@ -1,12 +1,14 @@
+/// <reference path="../../src/vega.d.ts" />
 import { Explore, ExploreField, Field, Tag } from '@malloydata/malloy';
+import { AlignValue, TextBaselineValue } from 'vega';
 import { RenderResultMetadata } from './types';
 export type ChartLayoutSettings = {
     plotWidth: number;
     plotHeight: number;
     xAxis: {
         labelAngle: number;
-        labelAlign?: string;
-        labelBaseline?: string;
+        labelAlign?: AlignValue;
+        labelBaseline?: TextBaselineValue;
         labelLimit: number;
         height: number;
         titleSize: number;

package/dist/component/dashboard/dashboard.d.ts

@@ -1,5 +1,4 @@
 import { DataArray } from '@malloydata/malloy';
-import './dashboard.css';
 export declare function Dashboard(props: {
     data: DataArray;
     scrollEl?: HTMLElement;

package/dist/component/render-link.d.ts

@@ -1,2 +1,2 @@
 import { AtomicField, DataColumn } from '@malloydata/malloy';
-export declare function renderLink(f: AtomicField, data: DataColumn): import("solid-js").JSX.Element | "∅";
+export declare function renderLink(f: AtomicField, data: DataColumn): "∅" | import("solid-js").JSX.Element;

package/dist/component/render-list.d.ts

@@ -1,2 +1,2 @@
 import { RendererProps } from './apply-renderer';
-export declare function renderList(props: RendererProps): import("solid-js").JSX.Element | "∅";
+export declare function renderList(props: RendererProps): "∅" | import("solid-js").JSX.Element;

package/dist/component/render.d.ts

@@ -13,6 +13,9 @@ export type MalloyRenderProps = {
 export declare const useConfig: () => {
     onClick?: ((payload: MalloyClickEventPayload) => void) | undefined;
     vegaConfigOverride?: VegaConfigHandler | undefined;
+    element: ICustomElement;
+    addCSSToShadowRoot: (css: string) => void;
+    addCSSToDocument: (id: string, css: string) => void;
 };
 export declare function MalloyRender(props: MalloyRenderProps, { element }: ComponentOptions): import("solid-js").JSX.Element;
 export declare function MalloyRenderInner(props: {

package/dist/component/table/table.d.ts

@@ -1,6 +1,5 @@
 import { Component } from 'solid-js';
 import { DataArrayOrRecord } from '@malloydata/malloy';
-import './table.css';
 declare const MalloyTable: Component<{
     data: DataArrayOrRecord;
     rowLimit?: number;

package/dist/component/types.d.ts

@@ -1,12 +1,20 @@
 /// <reference path="../../src/vega.d.ts" />
 import { DataColumn, DataRecord, Explore, Field, QueryData, QueryDataRow, Tag } from '@malloydata/malloy';
-import { Item, Runtime, View } from 'vega';
+import { Item, Runtime, Spec, View } from 'vega';
 import { JSX } from 'solid-js';
 import { ResultStore } from './result-store/result-store';
-export type VegaSpec = any;
+export type VegaSignalRef = {
+    signal: string;
+};
+export type VegaPadding = {
+    top?: number;
+    left?: number;
+    right?: number;
+    bottom?: number;
+};
 export type MalloyDataToChartDataHandler = (field: Explore, data: QueryData) => unknown[];
 export type VegaChartProps = {
-    spec: VegaSpec;
+    spec: Spec;
     plotWidth: number;
     plotHeight: number;
     totalWidth: number;

package/dist/component/vega/measure-axis.d.ts

@@ -1,3 +1,5 @@
+/// <reference path="../../../src/vega.d.ts" />
+import { Axis, GroupMark, RectMark } from 'vega';
 import { ChartLayoutSettings } from '../chart-layout-settings';
 type MeasureAxisOptions = {
     type: 'y';
@@ -11,8 +13,8 @@ type MeasureAxisOptions = {
     axisSettings: ChartLayoutSettings['yAxis'];
 };
 export declare function createMeasureAxis({ type, title, tickCount, labelLimit, fieldPath, showBrushes, axisSettings, }: MeasureAxisOptions): {
-    axis: any;
-    interactiveMarks: any[];
+    axis: Axis;
+    interactiveMarks: (GroupMark | RectMark)[];
     interactiveSignals: never[];
     brushMeasureEvents: {
         events: string;

package/dist/html/data_styles.d.ts

@@ -1,5 +1,6 @@
+/// <reference path="../../src/vega.d.ts" />
 import * as lite from 'vega-lite';
-import { VegaSpec } from '../component/types';
+import { Config } from 'vega';
 export type DataStyles = {
     [fieldName: string]: RenderDef;
 };
@@ -159,7 +160,7 @@ export interface ChartRenderOptions extends DataRenderOptions {
         color?: string;
         shape?: string;
     };
-    vegaConfigOverride?: VegaSpec;
+    vegaConfigOverride?: Config;
 }
 export interface CartesianChartRenderOptions extends ChartRenderOptions {
     chart?: {