|
11 | 11 | import { useCallback, useEffect, useMemo, useRef, useState } from "https://esm.sh/react@^19.2.6"; |
12 | 12 | import React from "https://esm.sh/react@^19.2.6"; |
13 | 13 | import { createRoot } from "https://esm.sh/react-dom@^19.2.6/client"; |
14 | | -import { createQueries, createStore } from "https://esm.sh/tinybase@8.4.0"; |
| 14 | +import { createQueries, createStore } from "https://esm.sh/tinybase@8.4.1"; |
15 | 15 | import { |
16 | 16 | Provider, |
17 | 17 | useCreateQueries, |
|
21 | 21 | useResultCell, |
22 | 22 | useResultSortedRowIds, |
23 | 23 | useResultTable |
24 | | -} from "https://esm.sh/tinybase@8.4.0/ui-react"; |
25 | | -import { ResultSortedTableInHtmlTable } from "https://esm.sh/tinybase@8.4.0/ui-react-dom"; |
26 | | -import { Inspector } from "https://esm.sh/tinybase@8.4.0/ui-react-inspector"; |
| 24 | +} from "https://esm.sh/tinybase@8.4.1/ui-react"; |
| 25 | +import { ResultSortedTableInHtmlTable } from "https://esm.sh/tinybase@8.4.1/ui-react-dom"; |
| 26 | +import { Inspector } from "https://esm.sh/tinybase@8.4.1/ui-react-inspector"; |
27 | 27 | var DIMENSION_CELL_IDS = ["Manufacturer", "Name", "Year", "Region"]; |
28 | 28 | var MEASURE_CELL_IDS = [ |
29 | 29 | "MPG", |
|
303 | 303 | </html>"></iframe><p>In this demo, we build an app that showcases the query capabilities of TinyBase v2.0, grouping and sorting dimensional data for lightweight analytical usage.</p><p>We've also updated it to use parameterized queries to take advantage of TinyBase v7.2.</p><p>The data from this demo is derived from <code>cars.json</code> in the <a href="https://github.com/vega/vega-datasets">Vega datasets</a> - thank you <a href="https://idl.cs.washington.edu/">UW Interactive Data Lab</a>!</p><h3 id="an-overview-of-the-data">An Overview Of The Data</h3><p>Before looking at code, let's familiarize ourselves with the data used in this application.</p><p>The raw data is loaded from a TSV file into one single <a href="/api/store/type-aliases/store/table/"><code>Table</code></a> object: <code>cars</code>, and comprises almost 400 records of cars made in the 1970s and 1980s.</p><p>For each, the data includes the manufacturer, the car name, year, and region. These <a href="/api/store/type-aliases/store/cell/"><code>Cell</code></a> values are 'dimensions' with which the data can be grouped.</p><p>Each record also includes a number of quantitative fields, including the car's miles-per-gallon (MPG), the number of cylinders, their displacement, its horsepower, weight, and acceleration. These <a href="/api/store/type-aliases/store/cell/"><code>Cell</code></a> values are 'measures' which can be aggregated together - in this basic app, to find their average, maximum, or minimum.</p><p>The app is oriented around one single query. As the user picks different dimensions or measures in the app's sidebar, that query is re-run and the results (either in graphical or tabular form) reactively update immediately.</p><h3 id="boilerplate">Boilerplate</h3><p>First, we create the import aliases for TinyBase and React modules we'll need:</p><pre><code><span class="tag"><span class="tag"><span class="punctuation"><</span>script</span> <span class="attr-name">type</span><span class="attr-value"><span class="punctuation">=</span><span class="punctuation">"</span>importmap<span class="punctuation">"</span></span><span class="punctuation">></span></span><span class="script"><span class="language-javascript"> |
304 | 304 | <span class="punctuation">{</span> |
305 | 305 | <span class="string-property">"imports"</span><span class="operator">:</span> <span class="punctuation">{</span> |
306 | | - <span class="string-property">"tinybase"</span><span class="operator">:</span> <span class="string">"https://esm.sh/tinybase@8.4.0"</span><span class="punctuation">,</span> |
307 | | - <span class="string-property">"tinybase/ui-react"</span><span class="operator">:</span> <span class="string">"https://esm.sh/tinybase@8.4.0/ui-react"</span><span class="punctuation">,</span> |
308 | | - <span class="string-property">"tinybase/ui-react-dom"</span><span class="operator">:</span> <span class="string">"https://esm.sh/tinybase@8.4.0/ui-react-dom"</span><span class="punctuation">,</span> |
309 | | - <span class="string-property">"tinybase/ui-react-inspector"</span><span class="operator">:</span> <span class="string">"https://esm.sh/tinybase@8.4.0/ui-react-inspector"</span><span class="punctuation">,</span> |
| 306 | + <span class="string-property">"tinybase"</span><span class="operator">:</span> <span class="string">"https://esm.sh/tinybase@8.4.1"</span><span class="punctuation">,</span> |
| 307 | + <span class="string-property">"tinybase/ui-react"</span><span class="operator">:</span> <span class="string">"https://esm.sh/tinybase@8.4.1/ui-react"</span><span class="punctuation">,</span> |
| 308 | + <span class="string-property">"tinybase/ui-react-dom"</span><span class="operator">:</span> <span class="string">"https://esm.sh/tinybase@8.4.1/ui-react-dom"</span><span class="punctuation">,</span> |
| 309 | + <span class="string-property">"tinybase/ui-react-inspector"</span><span class="operator">:</span> <span class="string">"https://esm.sh/tinybase@8.4.1/ui-react-inspector"</span><span class="punctuation">,</span> |
310 | 310 | <span class="string-property">"react"</span><span class="operator">:</span> <span class="string">"https://esm.sh/react@^19.2.6"</span><span class="punctuation">,</span> |
311 | 311 | <span class="string-property">"react/jsx-runtime"</span><span class="operator">:</span> <span class="string">"https://esm.sh/react@^19.2.6/jsx-runtime"</span><span class="punctuation">,</span> |
312 | 312 | <span class="string-property">"react-dom/client"</span><span class="operator">:</span> <span class="string">"https://esm.sh/react-dom@^19.2.6/client"</span> |
|
0 commit comments