Better legend and color scales

kausaltech · Feb 10, 2022 · 5bb6bf1 · 5bb6bf1
1 parent 84c5e3e
commit 5bb6bf1
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 26 deletions.
diff --git a/analytics/client/locales/fi.json b/analytics/client/locales/fi.json
@@ -25,7 +25,7 @@
   "choose-area": "Valitse tarkasteltava alue",
   "site-name": "Liikkumisen hiilijalanjälkilaskurin analytiikkatyökalu",
   "show-reflexive-trips": "Näytä valittuun alueeseen kohdistuvat matkat",
-  "transport-mode-share-km": "Kulkumuodon osuus matkasuoritteesta",
-  "transport-mode-share-trips": "Kulkumuodon osuus matkoista",
+  "transport-mode-share-km": "Kulkumuodon osuus matkasuoritteesta %",
+  "transport-mode-share-trips": "Kulkumuodon osuus matkoista %",
   "transport-modes": "Kulkumuoto"
 }
diff --git a/analytics/client/src/ColorLegend.js b/analytics/client/src/ColorLegend.js
@@ -4,6 +4,9 @@ import { formatDecimal, formatFloat } from './utils';
 
 
 export default function ColorLegend({title, elements}) {
+  if (elements == null || elements.length == 0) {
+    return null;
+  }
   const style = {
     position: 'absolute',
     fontSize: 12,
@@ -26,16 +29,32 @@ export default function ColorLegend({title, elements}) {
       borderColor: chroma(color).darken().hex()
     })
   );
+  let elementPairs = elements;
+  if (parseFloat(elements[0][1])) {
+    elementPairs = elements.map((el, idx, arr) => {
+      if (idx === arr.length - 1) {
+        return;
+      }
+      return [el[0], [el[1], arr[idx+1][1]]];
+    }).filter(el => el != null).reverse();
+  }
+  const formatValuePair = (value) => {
+    const x = value.map(
+      v => (<>{parseFloat(v) ? formatFloat(v*100) : v}</>));
+    x.splice(1, 0, <>&ndash;</>);
+    return x;
+  };
+  const formatValue = (value) => (Array.isArray(value) ? formatValuePair(value) : value);
   return (
     <div style={style}>
       <table>
         <caption style={{textAlign: 'left'}}><strong>{title}</strong></caption>
         <tbody>
-          { elements.map(([color, value]) => (
+          { elementPairs.map(([color, value]) => (
             <tr key={value}>
               <td style={{width: 14}}><div style={getElStyle(color)}/></td>
               <td style={{textAlign: 'left', verticalAlign: 'bottom'}}>
-                { parseFloat(value) ? formatFloat(value*100) + '%' : value }
+                { formatValue(value) }
               </td>
             </tr>
           ))}

diff --git a/analytics/client/src/Map.js b/analytics/client/src/Map.js
@@ -55,24 +55,15 @@ function AreaMap({ geoData, getFillColor, getElevation, getTooltip, colorStateKe
   let elements = [];
   let title = null;
   if (scales != null) {
-    if (scales.classes()) {
-      title = t('transport-mode-share-km')
-      elements = scales?.classes().map(val => (
-        [scales(val).alpha(AREA_ALPHA).hex(), val]));
-    }
-    else {
-      title = t('transport-mode-share-trips')
-      for (let i=0; i<11; i++) {
-        let val = i*0.1;
-        elements.push([scales(val).alpha(AREA_ALPHA).hex(), val])
-      }
-    }
+    title = t('transport-mode-share-km')
+    elements = scales?.classes().map(val => (
+      [scales(val).alpha(AREA_ALPHA).hex(), val]));
   }
 
   return (
     <div>
       <Layer>
-        { elements && <ColorLegend title={title} elements={elements.reverse()} /> }
+        { elements && <ColorLegend title={title} elements={elements} /> }
         { hoverInfo.object && (
           <Popup
             x={hoverInfo.x}
@@ -139,15 +130,9 @@ export function TransportModeShareMap({ areaType,
       const maxLength = absoluteVals[absoluteVals.length - 1];
       const relativeVals = areaData.orderby(`${modeId}_rel`).array(`${modeId}_rel`);
 
-      if (quantity === 'lengths') {
-        const limits = chroma.limits(relativeVals, 'q', 7);
-        scales = chroma.scale([selectedTransportMode.colors.zero,
-                               selectedTransportMode.colors.primary]).classes(limits);
-      }
-      else if (quantity === 'trips') {
-        scales = chroma.scale([selectedTransportMode.colors.zero,
-                               selectedTransportMode.colors.primary]);
-      }
+      const limits = chroma.limits(relativeVals, 'q', 8);
+      scales = chroma.scale([selectedTransportMode.colors.zero,
+                             selectedTransportMode.colors.primary]).classes(limits);
     }
 
     getElevation = (d) => {