Adding Negative Functionallity to MapChartComponent

src/client/app/components/MapChartComponent.tsx

@@ -174,8 +174,6 @@ export default function MapChartComponent() {
 							if (readingsData !== undefined && !meterIsFetching) {
 								// Meter name to include in hover on graph.
 								const label = meterDataById[meterID].identifier;
-								// The usual color for this meter.
-								colors.push(getGraphColor(meterID, DataType.Meter));
 								if (!readingsData) {
 									throw new Error('Unacceptable condition: readingsData.readings is undefined.');
 								}
@@ -208,6 +206,13 @@ export default function MapChartComponent() {
 									}
 									// The size is the reading value. It will be scaled later.
 									size.push(averagedReading);
+									//The Color checked if negative
+									if(averagedReading >= 0){
+										colors.push(getGraphColor(meterID, DataType.Meter));
+										}
+										else{
+											colors.push(getGraphColor(6, DataType.Meter));
+										}
 								}
 								// The hover text.
 								hoverText.push(`<b> ${timeReading} </b> <br> ${label}: ${averagedReading.toPrecision(6)} ${unitLabel}`);
@@ -300,11 +305,19 @@ export default function MapChartComponent() {
 			// The circle size is set to area below. Thus, we need to convert from wanting a max
 			// diameter of minDimension * maxFeatureFraction to an area.
 			const maxCircleSize = Math.PI * Math.pow(minDimension * maxFeatureFraction / 2, 2);
+			const minCircleSize = Math.PI * Math.pow(minDimension * maxFeatureFraction / (10*2), 2)
 			// Find the largest circle which is usage.
 			const largestCircleSize = Math.max(...size);
+			const smallestCircleSize = Math.min(...size);
 			// Scale largest circle to the max size and others will be scaled to be smaller.
 			// Not that < 1 => a larger circle.
-			const scaling = largestCircleSize / maxCircleSize;
+			const scaling = (largestCircleSize - smallestCircleSize)  / (maxCircleSize - minCircleSize);
+			const minShift = 10*scaling + 5;
+
+			for(let i=0;i<size.length;i++){
+                size[i]+=minShift;
+            }
+
 
 			// Per https://plotly.com/javascript/reference/scatter/:
 			// The opacity of 0.5 makes it possible to see the map even when there is a circle but the hover