@malloydata/render 0.0.94 → 0.0.95-dev231024220124

package/.storybook/main.ts

@@ -0,0 +1,46 @@
+import {join, dirname} from 'path';
+import {mergeConfig} from 'vite';
+import {StorybookConfig} from '@storybook/html-vite';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config: StorybookConfig = {
+  'stories': ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: ['../src/stories/static'],
+  'addons': [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  'framework': {
+    'name': '@storybook/html-vite',
+    'options': {},
+  },
+  'docs': {
+    'autodocs': 'tag',
+  },
+  async viteFinal(config, {configType}) {
+    if (configType === 'DEVELOPMENT') {
+      // Your development configuration goes here
+    }
+    if (configType === 'PRODUCTION') {
+      // Your production configuration goes here.
+    }
+    const finalConfig = mergeConfig(config, {
+      resolve: {
+        preserveSymlinks: true,
+      },
+      define: {
+        'process.env': {},
+      },
+    });
+    return finalConfig;
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,33 @@
+import {DuckDBWASMConnection} from '@malloydata/db-duckdb/wasm';
+import {Preview} from '@storybook/html';
+import registeredData from './registered_data.json';
+
+async function createConnection() {
+  const connection = new DuckDBWASMConnection('duckdb');
+  await connection.connecting;
+  for (let tableName of registeredData) {
+    const fullTableName = `data/${tableName}`;
+    await connection.registerRemoteTable(
+      fullTableName,
+      new window.URL(fullTableName, window.location.href).toString()
+    );
+  }
+  return connection;
+}
+
+const preview: Preview = {
+  parameters: {
+    actions: {argTypesRegex: '^on[A-Z].*'},
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  globals: {
+    connection: createConnection(),
+  },
+};
+
+export default preview;

package/.storybook/registered_data.json

@@ -0,0 +1 @@
+["products.parquet"]

package/README.md

@@ -5,3 +5,15 @@ Malloy is an experimental language for describing data relationships and transfo
 ## This package
 
 This package provides a simple mechanism to render charts based on results from using the `malloydata/malloy` library. See [here](https://github.com/malloydata/malloy/blob/main/packages/malloy/README.md) for additional information.
+
+## Developing locally with Storybook
+
+Run `npm run storybook` to launch a Storybook app in your browser. This app will hot reload as you make changes to the renderer source.
+
+Stories are written in the `src/stories` directory. To add more data and Malloy files for your stories to consume, you must:
+
+- put .malloy files in `src/stories/static`
+- put data files in `src/stories/static/data`
+- register data files be loaded into the DuckDB WASM connection by adding the file name to `.storybook/registered_data.json`
+
+[Take a look at the Basic story as an example.](./src/stories/basic.stories.ts)

package/dist/drill.js

@@ -102,7 +102,7 @@ function getDrillFilters(data) {
 exports.getDrillFilters = getDrillFilters;
 function getDrillQuery(data) {
     const { formattedFilters, source } = getDrillFilters(data);
-    let ret = `query: ${(source === null || source === void 0 ? void 0 : source.name) || '"unable to compute source"'} `;
+    let ret = `run: ${(source === null || source === void 0 ? void 0 : source.name) || '"unable to compute source"'} `;
     if (formattedFilters.length) {
         ret += `{ \n  where: \n    ${formattedFilters.join(',\n    ')}\n  \n}\n`;
     }

package/dist/html/image.js

@@ -37,13 +37,13 @@ class HTMLImageRenderer {
             ? (0, utils_1.createNullElement)(this.document)
             : this.document.createElement('img');
         const { tag } = data.field.tagParse();
-        const width = tag.numeric('image', 'width');
-        const height = tag.numeric('image', 'height');
+        const width = tag.text('image', 'width');
+        const height = tag.text('image', 'height');
         // Both image and null placeholder get matching size
         if (width)
-            element.style.width = `${width}px`;
+            element.style.width = width;
         if (height)
-            element.style.height = `${height}px`;
+            element.style.height = height;
         // Image specific props
         if (!data.isNull()) {
             const alt = tag.text('image', 'alt');

package/dist/stories/basic.stories.d.ts

@@ -0,0 +1,25 @@
+declare const _default: {
+    title: string;
+    render: ({ source, view }: {
+        source: any;
+        view: any;
+    }, { globals: { connection } }: {
+        globals: {
+            connection: any;
+        };
+    }) => HTMLDivElement;
+    argTypes: {};
+};
+export default _default;
+export declare const ProductsTable: {
+    args: {
+        source: string;
+        view: string;
+    };
+};
+export declare const ProductsBar: {
+    args: {
+        source: string;
+        view: string;
+    };
+};

package/dist/stories/basic.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductsBar = exports.ProductsTable = void 0;
+const basic_malloy_raw_1 = __importDefault(require("./static/basic.malloy?raw"));
+const render_malloy_1 = require("./render-malloy");
+exports.default = {
+    title: 'Malloy/Basic',
+    render: ({ source, view }, { globals: { connection } }) => {
+        return (0, render_malloy_1.renderMalloy)({ script: basic_malloy_raw_1.default, source, view, connection });
+    },
+    argTypes: {},
+};
+exports.ProductsTable = {
+    args: {
+        source: 'products',
+        view: '{ select: * }',
+    },
+};
+exports.ProductsBar = {
+    args: {
+        source: 'products',
+        view: 'category_bar',
+    },
+};
+//# sourceMappingURL=basic.stories.js.map

package/dist/stories/render-malloy.d.ts

@@ -0,0 +1,9 @@
+import { DuckDBWASMConnection } from '@malloydata/db-duckdb/wasm';
+type RenderOptions = {
+    script: string;
+    source: string;
+    view: string;
+    connection: Promise<DuckDBWASMConnection>;
+};
+export declare function renderMalloy(options: RenderOptions): HTMLDivElement;
+export {};

package/dist/stories/render-malloy.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderMalloy = void 0;
+const malloy_1 = require("@malloydata/malloy");
+const html_1 = require("../html");
+async function runAndRender({ script, source, view, connection }) {
+    const conn = await connection;
+    const runtime = new malloy_1.SingleConnectionRuntime(conn);
+    const model = runtime.loadModel(script);
+    const runner = model.loadQuery(`run: ${source} -> ${view}`);
+    const viewer = new html_1.HTMLView(document);
+    const result = await runner.run();
+    return await viewer.render(result, { dataStyles: {} });
+}
+function renderMalloy(options) {
+    const div = document.createElement('div');
+    runAndRender(options).then(el => div.replaceChildren(el));
+    return div;
+}
+exports.renderMalloy = renderMalloy;
+//# sourceMappingURL=render-malloy.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malloydata/render",
-  "version": "0.0.94",
+  "version": "0.0.95-dev231024220124",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,10 +18,12 @@
     "test": "jest --config=../../jest.config.js",
     "build": "tsc --build",
     "clean": "tsc --build --clean",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@malloydata/malloy": "^0.0.94",
+    "@malloydata/malloy": "^0.0.95-dev231024220124",
     "@types/luxon": "^2.4.0",
     "lodash": "^4.17.20",
     "luxon": "^2.4.0",
@@ -29,5 +31,15 @@
     "us-atlas": "^3.0.0",
     "vega": "^5.21.0",
     "vega-lite": "^5.2.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.5.0",
+    "@storybook/addon-interactions": "^7.5.0",
+    "@storybook/addon-links": "^7.5.0",
+    "@storybook/blocks": "^7.5.0",
+    "@storybook/html": "^7.5.0",
+    "@storybook/html-vite": "^7.5.0",
+    "@storybook/testing-library": "^0.2.2",
+    "storybook": "^7.5.0"
   }
 }