@malloydata/render 0.0.116-dev240104225124 → 0.0.116-dev240105181617

package/.storybook/main.ts

@@ -11,7 +11,10 @@ function getAbsolutePath(value) {
 }
 
 const config: StorybookConfig = {
-  'stories': ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  'stories': [
+    '../src/stories/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
   staticDirs: ['../src/stories/static'],
   'addons': [
     getAbsolutePath('@storybook/addon-links'),

package/.storybook/manager-head.html

@@ -0,0 +1,16 @@
+<link rel="preconnect" href="https://rsms.me/" />
+<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+<link rel="icon" href="./favicon.ico" />
+<style>
+  :root {
+    font-family: Inter, sans-serif;
+    font-feature-settings:
+      'liga' 1,
+      'calt' 1; /* fix for Chrome */
+  }
+  @supports (font-variation-settings: normal) {
+    :root {
+      font-family: InterVariable, sans-serif;
+    }
+  }
+</style>

package/.storybook/manager.ts

@@ -0,0 +1,16 @@
+import {addons} from '@storybook/manager-api';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+  isFullscreen: false,
+  showNav: true,
+  showPanel: false,
+  panelPosition: 'bottom',
+  enableShortcuts: true,
+  showToolbar: false,
+  selectedPanel: undefined,
+  initialActive: 'sidebar',
+  sidebar: {},
+  toolbar: {},
+});

package/.storybook/preview-head.html

@@ -1,2 +1,15 @@
 <link rel="preconnect" href="https://rsms.me/" />
 <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+<style>
+  :root {
+    font-family: Inter, sans-serif;
+    font-feature-settings:
+      'liga' 1,
+      'calt' 1; /* fix for Chrome */
+  }
+  @supports (font-variation-settings: normal) {
+    :root {
+      font-family: InterVariable, sans-serif;
+    }
+  }
+</style>

package/.storybook/preview.ts

@@ -1,6 +1,7 @@
 import {DuckDBWASMConnection} from '@malloydata/db-duckdb/wasm';
 import {Preview} from '@storybook/html';
 import registeredData from './registered_data.json';
+import theme from './theme';
 
 async function createConnection() {
   const connection = new DuckDBWASMConnection('duckdb', null, undefined, {
@@ -26,6 +27,9 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    docs: {
+      theme,
+    },
   },
   globals: {
     connection: createConnection(),

package/.storybook/theme.ts

@@ -0,0 +1,12 @@
+import {create} from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+  brandTitle:
+    '<div style="display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 500;"><img src="https://docs.malloydata.dev/img/logo.png" style="height: 24px"/><div>Renderer</div></div>',
+  brandUrl: 'https://malloydata.github.io',
+  fontBase: '"Inter", "Open Sans", sans-serif',
+  fontCode: 'monospace',
+  colorSecondary: '#477DEC',
+  appBg: '#ECF1FB',
+});

package/dist/component/render.d.ts

@@ -1,4 +1,4 @@
-import { Result } from '@malloydata/malloy';
+import { Result, Tag } from '@malloydata/malloy';
 import { LitElement, PropertyValues } from 'lit';
 import './table';
 import './bar-chart';
@@ -8,6 +8,7 @@ export declare class MalloyRender extends LitElement {
     result: Result;
     metadata: RenderResultMetadata;
     willUpdate(changedProperties: PropertyValues<this>): void;
+    updateTheme(modelTheme?: Tag, localTheme?: Tag): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/component/render.js

@@ -53,13 +53,14 @@ let MalloyRender = class MalloyRender extends lit_1.LitElement {
     willUpdate(changedProperties) {
         if (changedProperties.has('result')) {
             this.metadata = (0, render_result_metadata_1.getResultMetadata)(this.result);
+            const modelTag = this.result.modelTag;
+            const { tag: resultTag } = this.result.tagParse();
+            const modelTheme = modelTag.tag('theme');
+            const localTheme = resultTag.tag('theme');
+            this.updateTheme(modelTheme, localTheme);
         }
     }
-    render() {
-        const modelTag = this.result.modelTag;
-        const { tag: resultTag } = this.result.tagParse();
-        const modelTheme = modelTag.tag('theme');
-        const localTheme = resultTag.tag('theme');
+    updateTheme(modelTheme, localTheme) {
         const tableRowHeight = getThemeValue('tableRowHeight', localTheme, modelTheme);
         const tableBodyColor = getThemeValue('tableBodyColor', localTheme, modelTheme);
         const tableFontSize = getThemeValue('tableFontSize', localTheme, modelTheme);
@@ -72,26 +73,24 @@ let MalloyRender = class MalloyRender extends lit_1.LitElement {
         const tablePinnedBackground = getThemeValue('tablePinnedBackground', localTheme, modelTheme);
         const tablePinnedBorder = getThemeValue('tablePinnedBorder', localTheme, modelTheme);
         const fontFamily = getThemeValue('fontFamily', localTheme, modelTheme);
-        const dynamicStyle = (0, lit_1.html) `<style>
-      :host {
-        --malloy-render--table-row-height: ${tableRowHeight};
-        --malloy-render--table-body-color: ${tableBodyColor};
-        --malloy-render--table-font-size: ${tableFontSize};
-        --malloy-render--font-family: ${fontFamily};
-        --malloy-render--table-header-color: ${tableHeaderColor};
-        --malloy-render--table-header-weight: ${tableHeaderWeight};
-        --malloy-render--table-body-weight: ${tableBodyWeight};
-        --malloy-render--table-border: ${tableBorder};
-        --malloy-render--table-background: ${tableBackground};
-        --malloy-render--table-gutter-size: ${tableGutterSize};
-        --malloy-render--table-pinned-background: ${tablePinnedBackground};
-        --malloy-render--table-pinned-border: ${tablePinnedBorder};
-      }
-    </style>`;
-        return (0, lit_1.html) `${dynamicStyle}<malloy-table
-        exportparts="table-container: container"
-        .data=${this.result.data}
-      ></malloy-table>`;
+        this.style.setProperty('--malloy-render--table-row-height', tableRowHeight);
+        this.style.setProperty('--malloy-render--table-body-color', tableBodyColor);
+        this.style.setProperty('--malloy-render--table-font-size', tableFontSize);
+        this.style.setProperty('--malloy-render--font-family', fontFamily);
+        this.style.setProperty('--malloy-render--table-header-color', tableHeaderColor);
+        this.style.setProperty('--malloy-render--table-header-weight', tableHeaderWeight);
+        this.style.setProperty('--malloy-render--table-body-weight', tableBodyWeight);
+        this.style.setProperty('--malloy-render--table-border', tableBorder);
+        this.style.setProperty('--malloy-render--table-background', tableBackground);
+        this.style.setProperty('--malloy-render--table-gutter-size', tableGutterSize);
+        this.style.setProperty('--malloy-render--table-pinned-background', tablePinnedBackground);
+        this.style.setProperty('--malloy-render--table-pinned-border', tablePinnedBorder);
+    }
+    render() {
+        return (0, lit_1.html) `<malloy-table
+      exportparts="table-container: container"
+      .data=${this.result.data}
+    ></malloy-table>`;
     }
 };
 exports.MalloyRender = MalloyRender;

package/dist/stories/bars.stories.d.ts

@@ -21,3 +21,9 @@ export declare const Sparks: {
         view: string;
     };
 };
+export declare const SparksNested: {
+    args: {
+        source: string;
+        view: string;
+    };
+};

package/dist/stories/bars.stories.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Sparks = exports.Nested = exports.Products2Column = void 0;
+exports.SparksNested = exports.Sparks = exports.Nested = exports.Products2Column = void 0;
 const bars_malloy_raw_1 = __importDefault(require("./static/bars.malloy?raw"));
 const util_1 = require("./util");
 require("./themes.css");
@@ -43,4 +43,10 @@ exports.Sparks = {
         view: 'sparks',
     },
 };
+exports.SparksNested = {
+    args: {
+        source: 'products',
+        view: 'sparks_nested',
+    },
+};
 //# sourceMappingURL=bars.stories.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malloydata/render",
-  "version": "0.0.116-dev240104225124",
+  "version": "0.0.116-dev240105181617",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@lit/context": "^1.1.0",
-    "@malloydata/malloy": "^0.0.116-dev240104225124",
+    "@malloydata/malloy": "^0.0.116-dev240105181617",
     "@types/luxon": "^2.4.0",
     "lit": "^3.0.2",
     "lodash": "^4.17.20",