chore(react,vue): Simplify legend implementation

CartoDB · Sep 6, 2024 · 677c6e4 · 677c6e4
1 parent b98b87a
commit 677c6e4
Show file tree

Hide file tree

Showing 12 changed files with 126 additions and 198 deletions.
diff --git a/packages/create-common/style.css b/packages/create-common/style.css
@@ -257,6 +257,77 @@ body {
   flex-grow: 1;
 }
 
+/******************************************************************************
+ * CARDS
+ */
+
+.card {
+  background: var(--card-background);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+summary.card-summary {
+  width: 100%;
+  height: var(--card-summary-height);
+  line-height: var(--card-summary-height);
+  flex-shrink: 0;
+  flex-grow: 0;
+  border-bottom: 1px solid var(--border-color);
+  cursor: pointer;
+  user-select: none;
+}
+
+summary.card-summary {
+  list-style: none;
+}
+
+summary.card-summary::-webkit-details-marker {
+  display: none;
+}
+
+summary.card-summary::after {
+  content: ' ►';
+  position: absolute;
+  top: 0rem;
+  right: 0.8rem;
+  color: var(--control-color);
+}
+
+details[open].card summary.card-summary:after {
+  content: ' ▼';
+}
+
+details.card summary.card-summary:hover:after {
+  color: var(--control-color-hover);
+}
+
+summary .card-summary-title {
+  padding: 0 1rem;
+  width: 100%;
+}
+
+.card-content {
+  flex-grow: 1;
+  padding: 1rem;
+  overflow: auto;
+}
+
+/******************************************************************************
+ * SKELETONS
+ */
+
+.skeleton {
+  display: block;
+  width: 100%;
+  background: var(--border-color);
+  filter: brightness(110%);
+  border-radius: var(--border-radius);
+}
+
 /******************************************************************************
  * SIDEBAR
  */
@@ -464,77 +535,6 @@ ul.category-list + button {
   right: 0;
 }
 
-/******************************************************************************
- * CARDS
- */
-
-.card {
-  background: var(--card-background);
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-summary.card-summary {
-  width: 100%;
-  height: var(--card-summary-height);
-  line-height: var(--card-summary-height);
-  flex-shrink: 0;
-  flex-grow: 0;
-  border-bottom: 1px solid var(--border-color);
-  cursor: pointer;
-  user-select: none;
-}
-
-summary.card-summary {
-  list-style: none;
-}
-
-summary.card-summary::-webkit-details-marker {
-  display: none;
-}
-
-summary.card-summary::after {
-  content: ' ►';
-  position: absolute;
-  top: 0rem;
-  right: 0.8rem;
-  color: var(--control-color);
-}
-
-details[open].card summary.card-summary:after {
-  content: ' ▼';
-}
-
-details.card summary.card-summary:hover:after {
-  color: var(--control-color-hover);
-}
-
-summary .card-summary-title {
-  padding: 0 1rem;
-  width: 100%;
-}
-
-.card-content {
-  flex-grow: 1;
-  padding: 1rem;
-  overflow: auto;
-}
-
-/******************************************************************************
- * SKELETONS
- */
-
-.skeleton {
-  display: block;
-  width: 100%;
-  background: var(--border-color);
-  filter: brightness(110%);
-  border-radius: var(--border-radius);
-}
-
 /******************************************************************************
  * FORMS
  */

diff --git a/packages/create-react/src/components/Card.tsx b/packages/create-react/src/components/Card.tsx
@@ -5,18 +5,24 @@ interface CardProps {
   title?: string;
   open?: boolean;
   collapsible?: boolean;
+  className?: string;
 }
 
-export function Card({ children, title, open = true }: CardProps) {
+export function Card({
+  children,
+  title,
+  className = '',
+  open = true,
+}: CardProps) {
   if (!title) {
     return (
-      <section className="card">
+      <section className={`card ${className}`}>
         <div className="card-content">{children}</div>
       </section>
     );
   }
   return (
-    <details className="card" open={open}>
+    <details className={`card ${className}`} open={open}>
       <summary className="card-summary">
         <span className="body1 card-summary-title">{title}</span>
       </summary>

diff --git a/packages/create-react/src/components/legends/Legend.tsx b/packages/create-react/src/components/legends/Legend.tsx
diff --git a/packages/create-react/src/components/legends/LegendEntryCategorical.tsx b/packages/create-react/src/components/legends/LegendEntryCategorical.tsx
@@ -2,7 +2,6 @@ import { Color } from '@deck.gl/core';
 import { toHexString } from '../../utils';
 
 export type LegendEntryCategoricalProps = {
-  type: 'categorical';
   title: string;
   subtitle: string;
   values: string[];

diff --git a/packages/create-react/src/components/legends/LegendEntryContinuous.tsx b/packages/create-react/src/components/legends/LegendEntryContinuous.tsx
@@ -2,7 +2,6 @@ import { Color } from '@deck.gl/core';
 import { toHexString } from '../../utils';
 
 export type LegendEntryContinuousProps = {
-  type: 'continuous';
   title: string;
   subtitle: string;
   domain: [number, number];

diff --git a/packages/create-react/src/components/views/CellTowersView.tsx b/packages/create-react/src/components/views/CellTowersView.tsx
@@ -12,6 +12,7 @@ import { FormulaWidget } from '../widgets/FormulaWidget';
 import { CategoryWidget } from '../widgets/CategoryWidget';
 import { useDebouncedState } from '../../hooks/useDebouncedState';
 import { AppContext } from '../../context';
+import { LegendEntryCategorical } from '../legends/LegendEntryCategorical';
 
 const MAP_VIEW = new MapView({ repeat: true });
 const MAP_STYLE =
@@ -131,19 +132,16 @@ export default function CellTowersView() {
           layerVisibility={layerVisibility}
           onLayerVisibilityChange={setLayerVisibility}
         />
-        <Legend
-          entries={[
-            // TODO: Cleaner way to generate a legend?
-            {
-              type: 'categorical',
-              title: 'Cell towers',
-              subtitle: 'By Radio',
-              values: RADIO_DOMAIN,
-              getSwatchColor: (value: string) =>
-                RADIO_COLORS({ properties: { radio: value } }, null!),
-            },
-          ]}
-        />
+        <Card title="Legend" className="legend">
+          <LegendEntryCategorical
+            title="Cell towers"
+            subtitle="By Radio"
+            values={RADIO_DOMAIN}
+            getSwatchColor={(value: string) =>
+              RADIO_COLORS({ properties: { radio: value } }, null!)
+            }
+          />
+        </Card>
         <aside
           className="map-footer"
           dangerouslySetInnerHTML={{ __html: attributionHTML }}

diff --git a/packages/create-react/src/components/views/PopulationView.tsx b/packages/create-react/src/components/views/PopulationView.tsx
@@ -10,6 +10,7 @@ import { Layers } from '../Layers';
 import { Card } from '../Card';
 import { AppContext } from '../../context';
 import { useDebouncedState } from '../../hooks/useDebouncedState';
+import { LegendEntryContinuous } from '../legends/LegendEntryContinuous';
 
 const MAP_VIEW = new MapView({ repeat: true });
 const MAP_STYLE =
@@ -109,19 +110,16 @@ export default function PopulationView() {
           layerVisibility={layerVisibility}
           onLayerVisibilityChange={setLayerVisibility}
         />
-        <Legend
-          entries={[
-            // TODO: Cleaner way to generate a legend?
-            {
-              type: 'continuous',
-              title: 'U.S. population',
-              subtitle: 'Sum of population by H3 cell',
-              domain: POP_DOMAIN,
-              getSwatchColor: (value) =>
-                POP_COLORS({ properties: { population_sum: value } }, null!),
-            },
-          ]}
-        />
+        <Card title="Legend" className="legend">
+          <LegendEntryContinuous
+            title="U.S. population"
+            subtitle="Sum of population by H3 cell"
+            domain={POP_DOMAIN}
+            getSwatchColor={(value) =>
+              POP_COLORS({ properties: { population_sum: value } }, null!)
+            }
+          />
+        </Card>
         <aside
           className="map-footer"
           dangerouslySetInnerHTML={{ __html: attributionHTML }}

diff --git a/packages/create-vue/src/components/legends/Legend.vue b/packages/create-vue/src/components/legends/Legend.vue
diff --git a/packages/create-vue/src/components/legends/LegendEntryCategorical.vue b/packages/create-vue/src/components/legends/LegendEntryCategorical.vue
@@ -3,7 +3,6 @@ import { Color } from '@deck.gl/core';
 import { toHexString } from '../../utils';
 
 export type LegendEntryCategoricalProps = {
-  type: 'categorical';
   title: string;
   subtitle: string;
   values: string[];

diff --git a/packages/create-vue/src/components/legends/LegendEntryContinuous.vue b/packages/create-vue/src/components/legends/LegendEntryContinuous.vue
@@ -2,7 +2,6 @@
 import type { Color } from '@deck.gl/core';
 
 export type LegendEntryContinuousProps = {
-  type: 'continuous';
   title: string;
   subtitle: string;
   domain: [number, number];