Merge pull request #250 from visualize-admin/feat/another-example-cha…

…nge-and-brush-fix Homepage example change & time brush domain fix
visualize-admin · Dec 7, 2021 · c270d82 · c270d82
2 parents 3ec3740 + 58d89b6
commit c270d82
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/app/charts/shared/brush.tsx b/app/charts/shared/brush.tsx
@@ -56,6 +56,11 @@ export const BrushTime = () => {
 
   brushWidthScale.range([0, brushWidth]);
 
+  const [minBrushDomainValue, maxBrushDomainValue] = useMemo(
+    () => brushWidthScale.domain().map((d) => d.getTime()),
+    [brushWidthScale]
+  );
+
   const updateBrushStatus = (event: $FixMe) => {
     const selection = event.selection;
     if (!event.sourceEvent || !selection) {
@@ -279,16 +284,19 @@ export const BrushTime = () => {
   // without transition
   useEffect(() => {
     const g = select(ref.current);
-
+    // Happens when transitioning from e.g. '2010-2020' to '1990-2000';
+    // the selection is then changed to the full extent
+    const identical = closestFrom.getTime() === closestTo.getTime();
     const defaultSelection = [
-      brushWidthScale(closestFrom),
-      brushWidthScale(closestTo),
+      brushWidthScale(identical ? minBrushDomainValue : closestFrom),
+      brushWidthScale(identical ? maxBrushDomainValue : closestTo),
     ];
+
     (g as Selection<SVGGElement, unknown, null, undefined>).call(
       brush.move,
       defaultSelection
     );
-  }, [closestFrom.toString(), closestTo.toString()]);
+  }, [minBrushDomainValue, maxBrushDomainValue]);
 
   // This effect makes the brush responsive
   useEffect(() => {

diff --git a/app/homepage/examples.tsx b/app/homepage/examples.tsx
@@ -133,13 +133,13 @@ export const Examples = ({
         reverse
       >
         <ChartPublished
-          dataSet="https://culture.ld.admin.ch/sfa/StateAccounts_Office/3/"
+          dataSet="https://culture.ld.admin.ch/sfa/StateAccounts_Office/4/"
           meta={{
             title: {
-              de: "Entwicklung der Staatsrechnungen nach Ämtern",
-              en: "Evolution of state accounts by office",
-              fr: "Evolution des comptes d'état par office",
-              it: "Evoluzione dei conti dello stato per ufficio",
+              de: "Verteilung der Ausgaben und Einnahmen nach Ämtern",
+              en: "Distribution of expenses and income by office",
+              fr: "Répartition des dépenses et recettes par office",
+              it: "Ripartizione delle spese e delle entrate per ufficio",
             },
             description: {
               de: "",
@@ -151,7 +151,7 @@ export const Examples = ({
           chartConfig={{
             fields: {
               x: {
-                componentIri: "http://www.w3.org/2006/time#Year",
+                componentIri: "http://www.w3.org/2006/time#year",
               },
               y: {
                 componentIri: "http://schema.org/amount",
@@ -164,9 +164,9 @@ export const Examples = ({
                   sortingOrder: "asc",
                 },
                 colorMapping: {
-                  "https://culture.ld.admin.ch/sfa/StateAccounts_Office/3/OperationCharacter/OC1":
+                  "https://culture.ld.admin.ch/sfa/StateAccounts_Office/OperationCharacter/OC1":
                     "#1f77b4",
-                  "https://culture.ld.admin.ch/sfa/StateAccounts_Office/3/OperationCharacter/OC2":
+                  "https://culture.ld.admin.ch/sfa/StateAccounts_Office/OperationCharacter/OC2":
                     "#ff7f0e",
                 },
                 componentIri:
@@ -177,7 +177,7 @@ export const Examples = ({
               "https://culture.ld.admin.ch/sfa/StateAccounts_Office/office": {
                 type: "single",
                 value:
-                  "https://culture.ld.admin.ch/sfa/StateAccounts_Office/3/Office/O7",
+                  "https://culture.ld.admin.ch/sfa/StateAccounts_Office/Office/O7",
               },
             },
             chartType: "area",