add RED_SCALE_HEAT for heat map

Author: citizen-dror

src/components/model/ModelClusterMarkers.tsx

@@ -21,7 +21,7 @@ const ModelClusterMarkers: FC<Props> = observer(
     return (
       <div>
         {clusters.map((cluster, index) => {
-          const color = getSeverityColor(cluster.severityIndex, sectors);
+          const color = getSeverityColor(cluster.severityIndex, sectors, isHeat);
           return (
           <ModelMarker
             key={`${cluster.name}-${index}`}

src/components/model/ModelTabs.tsx

@@ -37,7 +37,7 @@ const ModelTabs: React.FC<IProps> = () => {
   const { t } = useTranslation();
   const dataAllInjuries = useSelector(selectDataAllInjuries) as Accident[];
 
-  const [activeTab, setActiveTab] = React.useState<'table' | 'map'>('table');
+  const [activeTab, setActiveTab] = React.useState<'densityTable'| 'densityMap' |'clusterTable' | 'clusterMap'>('densityMap');
   const [junctionRadius, setJunctionRadius] = React.useState(50);
   const [heatmapRadius, setHeatmapRadius] = React.useState(200);
   const [severityMode, setSeverityMode] =
@@ -113,22 +113,22 @@ const ModelTabs: React.FC<IProps> = () => {
 
         <Tabs
         activeKey={activeTab}
-        onSelect={key => setActiveTab(key as 'table' | 'map')}
+        onSelect={key => setActiveTab(key as 'densityTable'| 'densityMap' |'clusterTable' | 'clusterMap')}
         mountOnEnter
         id="model-tabs"
       >
-        <Tab eventKey="tableDensity" title={t('TableDensity')}>
+        <Tab eventKey="densityTable" title={t('DensityTable')}>
           <ClusterTable clusterTable={clusterTableDensity} />
         </Tab>
-        <Tab eventKey="hetmap" title={t('HeatMap')}>
+        <Tab eventKey="densityMap" title={t('DensityMap')}>
           <ModelMap clusters={clusterTableDensity} isHeat={true} sizeHeat={heatmapRadius}/> 
         </Tab>
 
-        <Tab eventKey="table" title={t('Table')}>
+        <Tab eventKey="clusterTable" title={t('ClusterTable')}>
           <ClusterTable clusterTable={clusterTable} />
         </Tab>
 
-        <Tab eventKey="map" title={t('Map')}>
+        <Tab eventKey="culsterMap" title={t('ClusterMap')}>
           <ModelMap clusters={clusterTable} isHeat={false} sizeHeat={heatmapRadius}/> 
         </Tab> 
       </Tabs>

src/components/model/modelhelper.ts

@@ -423,7 +423,8 @@ export function buildSeveritySectors(
 
 export function getSeverityColor(
   severityIndex: number,
-  sectors: ModelSeverityRange[]
+  sectors: ModelSeverityRange[],
+  isHeat : boolean
 ): string {
   if (!sectors.length) {
     return '#FFF176';
@@ -432,8 +433,10 @@ export function getSeverityColor(
     sectors.find(
       s => severityIndex >= s.from && severityIndex <= s.to
     ) ?? sectors[sectors.length - 1];
-
-  return RED_SCALE[Math.min(sector.index, RED_SCALE.length - 1)];
+  const colorScale = isHeat ? RED_SCALE_HEAT : RED_SCALE;
+  const index = Math.min(sector.index, colorScale.length - 1);
+  const res = colorScale[index];
+  return res;
 }
 
 const RED_SCALE: string[] = [
@@ -444,4 +447,10 @@ const RED_SCALE: string[] = [
   '#CC0000', // deep red (most severe)
 ];
 
-
+export const RED_SCALE_HEAT: string[] = [
+  '#FF8A80', // very light red (low heat)
+  '#FF5252', // light red
+  '#FF1744', // medium red
+  '#D50000', // strong red
+  '#B71C1C', // deep dark red (high heat)
+];

src/lng/en/translation.json

@@ -4,6 +4,10 @@
 	"English": "English",
 	"National": "National",
 	"HeatMap": "Heat Map",
+	"DensityTable": "Density Table",
+	"DensityMap": "Density Map",
+	"ClusterTable" : "Cluster Table",
+	"ClusterMap" : "Cluster Map",
 	"Markers": "Markers",
 	"Clusters": "Clusters",
 	"Cities": "Cities",

src/lng/he/translation.json

@@ -4,6 +4,10 @@
 	"English": "English",
 	"National": "ארצי",
 	"HeatMap": "מפת חום",
+	"DensityTable": "טבלת צפיפות",
+	"DensityMap": "מפת צפיפות",
+	"ClusterTable" : "טבלת מקבצים",
+	"ClusterMap" : "מפת מקבצים",
 	"Markers": "מרקרים",
 	"Clusters": "קלסטרס",
 	"Cities": "יישובים",