-
Notifications
You must be signed in to change notification settings - Fork 124
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into fil/summary-table
- Loading branch information
Showing
442 changed files
with
118,598 additions
and
16,920 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,23 @@ | ||
| # Observable Framework | ||
|
|
||
| - [Documentation](https://observablehq.com/framework/) | ||
| - [Changelog](https://github.com/observablehq/framework/releases) | ||
| - [Issues](https://github.com/observablehq/framework/issues) | ||
| [**Observable Framework**](https://observablehq.com/framework/) is a free, [open-source](./LICENSE), static site generator for data apps, dashboards, reports, and more. Framework combines JavaScript on the front-end for interactive graphics with any language on the back-end for data analysis. Framework features [data loaders](https://observablehq.com/framework/loaders) that precompute static snapshots of data at build time for dashboards that load instantly. | ||
|
|
||
| ## Documentation 📚 | ||
|
|
||
| https://observablehq.com/framework/ | ||
|
|
||
| ## Examples 🖼️ | ||
|
|
||
| https://github.com/observablehq/framework/tree/main/examples | ||
|
|
||
| ## Releases (changelog) 🚀 | ||
|
|
||
| https://github.com/observablehq/framework/releases | ||
|
|
||
| ## Getting help 🏠 | ||
|
|
||
| Please [open a discussion](https://github.com/observablehq/framework/discussions) if you’d like help. We also recommend [searching issues](https://github.com/observablehq/framework/issues). You can also ask on the [Observable forum](https://talk.observablehq.com/) or [Observable community Slack](https://observablehq.com/slack/join). | ||
|
|
||
| ## Contributing 🙏 | ||
|
|
||
| See [`CONTRIBUTING.md`](./CONTRIBUTING.md). |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,54 +1,3 @@ | ||
| # CSS: Card | ||
| <meta http-equiv="refresh" content="0; url=../markdown#cards"> | ||
|
|
||
| The `card` class is used to group and delineate content. The `card` classes applies a background and border (with colors determined by the current [theme](../themes)). A card can have a title and subtitle using <code>h2</code> and <code>h3</code> elements, respectively. | ||
|
|
||
| ```html echo | ||
| <div class="card" style="max-width: 640px;"> | ||
| <h2>It gets hotter during summer</h2> | ||
| <h3>And months have 28–31 days</h3> | ||
| ${Plot.cell(weather.slice(-365), {x: (d) => d.date.getUTCDate(), y: (d) => d.date.getUTCMonth(), fill: "temp_max", tip: true, inset: 0.5}).plot({marginTop: 0, height: 240, padding: 0})} | ||
| </div> | ||
| ``` | ||
|
|
||
| <div class="tip"><a href="../lib/plot">Observable Plot</a>’s <b>title</b> and <b>subtitle</b> options generate <code>h2</code> and <code>h3</code> elements, respectively, and so will inherit these card styles.</div> | ||
|
|
||
| Cards can be used on their own, but they most often exist in a [grid](./grid). Cards can contain whatever you like, including text, images, charts, tables, inputs, and more. | ||
|
|
||
| ```html echo | ||
| <div class="grid grid-cols-2"> | ||
| <div class="card"> | ||
| <h2>Lorem ipsum</h2> | ||
| <p>Id ornare arcu odio ut sem nulla pharetra. Aliquet lectus proin nibh nisl condimentum id venenatis a. Feugiat sed lectus vestibulum mattis ullamcorper velit. Aliquet nec ullamcorper sit amet. Sit amet tellus cras adipiscing. Condimentum id venenatis a condimentum vitae. Semper eget duis at tellus. Ut faucibus pulvinar elementum integer enim.</p> | ||
| <p>Et malesuada fames ac turpis. Integer vitae justo eget magna fermentum iaculis eu non diam. Aliquet risus feugiat in ante metus dictum at. Consectetur purus ut faucibus pulvinar.</p> | ||
| </div> | ||
| <div class="card" style="padding: 0;"> | ||
| ${Inputs.table(industries)} | ||
| </div> | ||
| </div> | ||
| ``` | ||
|
|
||
| <div class="tip">Remove the padding from a card if it contains only a table.</div> | ||
|
|
||
| To place an input inside a card, first declare a detached input as a [top-level variable](../javascript/reactivity#top-level-variables) and use [`Generators.input`](../lib/generators#inputelement) to expose its reactive value: | ||
|
|
||
| ```js echo | ||
| const industryInput = Inputs.select(industries.map((d) => d.industry), {unique: true, sort: true, label: "Industry:"}); | ||
| const industry = Generators.input(industryInput); | ||
| ``` | ||
|
|
||
| Then, insert the input into the card: | ||
|
|
||
| ```html echo | ||
| <div class="card" style="display: flex; flex-direction: column; gap: 1rem;"> | ||
| ${industryInput} | ||
| ${resize((width) => Plot.plot({ | ||
| width, | ||
| y: {grid: true, label: "Unemployed (thousands)"}, | ||
| marks: [ | ||
| Plot.areaY(industries.filter((d) => d.industry === industry), {x: "date", y: "unemployed", fill: "var(--theme-foreground-muted)", curve: "step"}), | ||
| Plot.lineY(industries.filter((d) => d.industry === industry), {x: "date", y: "unemployed", curve: "step"}), | ||
| Plot.ruleY([0]) | ||
| ] | ||
| }))} | ||
| </div> | ||
| ``` | ||
| Moved to [Layout: Cards](../markdown#cards). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,88 +1,3 @@ | ||
| # CSS: Color | ||
| <meta http-equiv="refresh" content="0; url=../themes#colors"> | ||
|
|
||
| The following custom properties are defined by the current [theme](../themes): | ||
|
|
||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Color</th> | ||
| <th>Description</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td><code>--theme-foreground</code></td> | ||
| <td><div style="background-color: var(--theme-foreground); width: 2rem; height: 1rem;"></div></td> | ||
| <td>page foreground color</td> | ||
| </tr> | ||
| <tr> | ||
| <td><code>--theme-background</code></td> | ||
| <td><div style="background-color: var(--theme-background); width: 2rem; height: 1rem;"></div></td> | ||
| <td>page background color</td> | ||
| </tr> | ||
| <tr> | ||
| <td><code>--theme-background-alt</code></td> | ||
| <td><div style="background-color: var(--theme-background-alt); width: 2rem; height: 1rem;"></div></td> | ||
| <td>block background color</td> | ||
| </tr> | ||
| <tr> | ||
| <td><code>--theme-foreground-alt</code></td> | ||
| <td><div style="background-color: var(--theme-foreground-alt); width: 2rem; height: 1rem;"></div></td> | ||
| <td>heading foreground color</td> | ||
| </tr> | ||
| <tr> | ||
| <td><code>--theme-foreground-muted</code></td> | ||
| <td><div style="background-color: var(--theme-foreground-muted); width: 2rem; height: 1rem;"></div></td> | ||
| <td>secondary text foreground color</td> | ||
| </tr> | ||
| <tr> | ||
| <td><code>--theme-foreground-faint</code></td> | ||
| <td><div style="background-color: var(--theme-foreground-faint); width: 2rem; height: 1rem;"></div></td> | ||
| <td>faint border color</td> | ||
| </tr> | ||
| <tr> | ||
| <td><code>--theme-foreground-fainter</code></td> | ||
| <td><div style="background-color: var(--theme-foreground-fainter); width: 2rem; height: 1rem;"></div></td> | ||
| <td>fainter border color</td> | ||
| </tr> | ||
| <tr> | ||
| <td><code>--theme-foreground-faintest</code></td> | ||
| <td><div style="background-color: var(--theme-foreground-faintest); width: 2rem; height: 1rem;"></div></td> | ||
| <td>faintest border color</td> | ||
| </tr> | ||
| <tr> | ||
| <td><code>--theme-foreground-focus</code></td> | ||
| <td><div style="background-color: var(--theme-foreground-focus); width: 2rem; height: 1rem;"></div></td> | ||
| <td>emphasis foreground color</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| You can use these properties anywhere you like. For example, to style a line chart to match the focus color: | ||
|
|
||
| ```js echo | ||
| Plot.lineY(aapl, {x: "Date", y: "Close", stroke: "var(--theme-foreground-focus)"}).plot() | ||
| ``` | ||
|
|
||
| A handful of color classes are also provided: | ||
|
|
||
| ```html echo | ||
| <div class="red">I am red text.</div> | ||
| ``` | ||
|
|
||
| ```html echo | ||
| <div class="yellow">I am yellow text.</div> | ||
| ``` | ||
|
|
||
| ```html echo | ||
| <div class="green">I am green text.</div> | ||
| ``` | ||
|
|
||
| ```html echo | ||
| <div class="blue">I am blue text.</div> | ||
| ``` | ||
|
|
||
| ```html echo | ||
| <div class="muted">I am muted text.</div> | ||
| ``` | ||
| Moved to [Themes: Colors](../themes#colors). |
Oops, something went wrong.