@buildcanada/charts 0.1.0

package/src/grapher/facet/readme.md

@@ -0,0 +1,13 @@
+# Faceting
+
+AKA Small multiples (https://en.wikipedia.org/wiki/Small_multiple) allows us to plot a lot of charts at once.
+
+## Similar Alternatives
+
+- Flourish: [https://app.flourish.studio/visualisation/43169/](https://app.flourish.studio/visualisation/43169/)
+- Vega: [https://vega.github.io/vega-lite/docs/facet.html](https://vega.github.io/vega-lite/docs/facet.html)
+- GGPlot: [https://ggplot2.tidyverse.org/reference/facet_grid.html](https://ggplot2.tidyverse.org/reference/facet_grid.html)
+- Seaborn: [https://seaborn.pydata.org/generated/seaborn.FacetGrid.html](https://seaborn.pydata.org/generated/seaborn.FacetGrid.html)
+- Tableau: [https://www.tableaufit.com/magic-tableau-small-multiples-faceting-design/](https://www.tableaufit.com/magic-tableau-small-multiples-faceting-design/)
+- Plotly: [https://plotly.com/python/facet-plots/](https://plotly.com/python/facet-plots/)
+- Google Research Facets: [https://pair-code.github.io/facets/](https://pair-code.github.io/facets/)

package/src/grapher/focus/FocusArray.ts

@@ -0,0 +1,79 @@
+import { action, computed, observable, makeObservable } from "mobx"
+import { SeriesName } from "../../types/index.js"
+import { InteractionState } from "../interaction/InteractionState.js"
+
+export class FocusArray {
+    constructor() {
+        makeObservable<FocusArray, "store">(this, {
+            store: observable,
+        })
+        this.store = new Set()
+    }
+
+    private store: Set<SeriesName>
+
+    @computed get seriesNameSet(): Set<SeriesName> {
+        return this.store
+    }
+
+    @computed get seriesNames(): SeriesName[] {
+        return Array.from(this.store)
+    }
+
+    @computed get isEmpty(): boolean {
+        return this.store.size === 0
+    }
+
+    @computed get hasFocusedSeries(): boolean {
+        return !this.isEmpty
+    }
+
+    /**
+     * Whether a series is currently focused
+     */
+    has(seriesName: SeriesName): boolean {
+        return this.store.has(seriesName)
+    }
+
+    /**
+     * Get the interaction state of a series
+     */
+    state(seriesName: SeriesName): InteractionState {
+        return new InteractionState(this.has(seriesName), !this.isEmpty)
+    }
+
+    @action.bound add(...seriesNames: SeriesName[]): this {
+        for (const seriesName of seriesNames) {
+            this.store.add(seriesName)
+        }
+        return this
+    }
+
+    @action.bound remove(...seriesNames: SeriesName[]): this {
+        for (const seriesName of seriesNames) {
+            this.store.delete(seriesName)
+        }
+        return this
+    }
+
+    @action.bound clearAllAndAdd(...seriesNames: SeriesName[]): this {
+        this.clear()
+        this.add(...seriesNames)
+        return this
+    }
+
+    @action.bound toggle(...seriesNames: SeriesName[]): this {
+        for (const seriesName of seriesNames) {
+            if (this.has(seriesName)) {
+                this.remove(seriesName)
+            } else {
+                this.add(seriesName)
+            }
+        }
+        return this
+    }
+
+    @action.bound clear(): void {
+        this.store.clear()
+    }
+}

package/src/grapher/footer/Footer.scss

@@ -0,0 +1,63 @@
+.SourcesFooterHTML {
+    // keep in sync with constant values in Footer.tsx
+    $horizontalPadding: 8px; // keep in sync with HORIZONTAL_PADDING
+
+    text-align: left;
+    color: $dark-text;
+
+    a {
+        text-underline-offset: auto;
+        color: $dark-text;
+        &:visited {
+            color: $dark-text;
+        }
+    }
+
+    p {
+        margin: 0;
+    }
+
+    .sources a.learn-more-about-data,
+    .note a {
+        text-decoration: underline;
+
+        &:hover {
+            text-decoration: none;
+        }
+    }
+
+    // show "Learn more about this data" link on the same line
+    .sources .markdown-text-wrap__line:last-child {
+        display: inline-block;
+    }
+
+    .license {
+        white-space: nowrap;
+
+        a {
+            text-decoration: none;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
+    .SourcesAndLicense {
+        display: flex;
+        justify-content: space-between;
+        gap: $horizontalPadding;
+    }
+
+    .SourcesFooterHTMLBottom {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        gap: $horizontalPadding;
+    }
+
+    // removes margin that is added by default to prevent border-bottom used for dod from clipping
+    .markdown-text-wrap__line:last-child {
+        margin-bottom: 0;
+    }
+}