Reworked colors of charts

hpi-swa · Oct 19, 2023 · 6caab16 · 6caab16
1 parent ebb4b1c
commit 6caab16
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 46 deletions.
diff --git a/packages/Sandblocks-Watch/SBBarChart.class.st b/packages/Sandblocks-Watch/SBBarChart.class.st
@@ -22,7 +22,7 @@ SBBarChart class >> newWithValues: traceValues [
 { #category : #'visualization - constants' }
 SBBarChart >> barWidth [
 
-	^ self spaceBetweenPoints / 3
+	^ self spaceBetweenPoints / 2
 ]
 
 { #category : #visualization }
@@ -36,11 +36,12 @@ SBBarChart >> newBarFor: aValue at: positionIndex [
 		color: Color transparent;
 		balloonText: aValue printString;
 		addMorph: (Morph new
-			color: (self datapointColorForValue: aValue);
+			color: self datapointDefaultColor;
 			width: self barWidth;
-			height: (self scaleY scaledValueOf: aValue);
-			bottom: self class canvasHeight + self class heightMargin ;
+			height: {(self scaleY scaledValueOf: aValue). 1} max;
+			bottom: self class canvasHeight + self class heightMargin;
 			left: positionIndex * self spaceBetweenPoints;
+			setProperty: #chartValue toValue: (self scaleY scaledValueOf: aValue);
 			yourself);
 		yourself
 
@@ -55,13 +56,13 @@ SBBarChart >> newDataPoints [
 ]
 
 { #category : #visualization }
-SBBarChart >> visualizationMorph [
+SBBarChart >> newLineFrom: aDataPointMorph1 to: aDataPointMorph2 [
 
-	| visualizationMorph |
-	visualizationMorph := self newBackground.
+	^ LineMorph 
+		from: aDataPointMorph1 topCenter 
+		to: aDataPointMorph2 topCenter  
+		color: ((self lineColorFrom: aDataPointMorph1 to: aDataPointMorph2) alpha: 0.2)
+		width: self lineWidth
 
-	visualizationMorph addAllMorphs: self newDataPoints.
-	visualizationMorph addAllMorphsBack: (self newScaleLinesOn: visualizationMorph).
 
-	^ visualizationMorph
 ]
diff --git a/packages/Sandblocks-Watch/SBLineChart.class.st b/packages/Sandblocks-Watch/SBLineChart.class.st
@@ -25,16 +25,6 @@ SBLineChart class >> supportedInterface [
 	^ #isNumber
 ]
 
-{ #category : #visualization }
-SBLineChart >> datapointColorForValue: aValue [
-
-	| scaledValue |
-	scaledValue := self scaleY scaleBehavior value: self scaleY domain value: aValue.
-	(scaledValue <= self class highlightedDataPercentage) ifTrue: [^ self datapointLowerPercentColor].
-	(scaledValue >= (1 - self class highlightedDataPercentage)) ifTrue: [^ self datapointHigherPercentColor].
-	^ self datapointDefaultColor
-]
-
 { #category : #'visualization - constants' }
 SBLineChart >> datapointDefaultColor [
 
@@ -47,30 +37,26 @@ SBLineChart >> datapointExtent [
 	^ 5@5
 ]
 
-{ #category : #'visualization - constants' }
-SBLineChart >> datapointHigherPercentColor [
+{ #category : #visualization }
+SBLineChart >> lineColorFrom: aDataPoint1 to: aDataPoint2 [
 
-	^ Color green
+	"Comparing y coordinates might yield false results as the coordinates are rounded
+	to whole numbers"
+	^ ((aDataPoint1 valueOfProperty: #chartValue) <= (aDataPoint2 valueOfProperty: #chartValue))
+		ifTrue: [self positiveGradientColor]
+		ifFalse: [self negativeGradientColor]
 ]
 
 { #category : #'visualization - constants' }
-SBLineChart >> datapointLowerPercentColor [
-
-	^ Color red
-]
-
-{ #category : #visualization }
-SBLineChart >> lineColorFrom: aPoint1 to: aPoint2 [
+SBLineChart >> lineWidth [
 
-	^ (aPoint1 y >= aPoint2 y) 
-		ifTrue: [self datapointHigherPercentColor]
-		ifFalse: [self datapointLowerPercentColor]
+	^ 2
 ]
 
 { #category : #'visualization - constants' }
-SBLineChart >> lineWidth [
+SBLineChart >> negativeGradientColor [
 
-	^ 2
+	^ Color red
 ]
 
 { #category : #visualization }
@@ -92,10 +78,11 @@ SBLineChart >> newDatapointFor: aValue at: positionIndex [
 		balloonText: aValue printString;
 		addMorph: (EllipseMorph new
 			extent: self datapointExtent;
-			color: (self datapointColorForValue: aValue);
+			color: self datapointDefaultColor;
 			borderWidth: 0;
 			left: positionIndex * self spaceBetweenPoints;
 			top: self class canvasHeight - (self scaleY scaledValueOf: aValue);
+			setProperty: #chartValue toValue: (self scaleY scaledValueOf: aValue); 
 			yourself);
 		yourself
 
@@ -109,7 +96,7 @@ SBLineChart >> newLineFrom: aDataPointMorph1 to: aDataPointMorph2 [
 	^ LineMorph 
 		from: aDataPointMorph1 center 
 		to: aDataPointMorph2 center 
-		color: (self lineColorFrom: aDataPointMorph1 center to: aDataPointMorph2 center)
+		color: (self lineColorFrom: aDataPointMorph1 to: aDataPointMorph2)
 		width: self lineWidth
 
 
@@ -124,19 +111,50 @@ SBLineChart >> newLinesForDatapointsOn: visualizationMorph [
 			to: anotherDataPointMorph firstSubmorph]
 ]
 
+{ #category : #visualization }
+SBLineChart >> newScaleLineFrom: anOrigin to: anEnd [ 
+
+	^ LineMorph from: anOrigin to: anEnd color: self scaleLineColor width: self scaleLineWidth
+
+
+]
+
+{ #category : #visualization }
+SBLineChart >> newScaleLineHeight: height length: length [ 
+
+	^ LineMorph 
+		from: 0 @ height 
+		to: length @ height 
+		color: self scaleLineColor 
+		width: self scaleLineWidth
+
+
+]
+
 { #category : #visualization }
 SBLineChart >> newScaleLinesOn: aMorph [
 
-	^ {LineMorph from: 0@self scaleYOffset to: aMorph width@self scaleYOffset
-		color: self scaleLineColor width: self scaleLineWidth.
-		LineMorph from: 0@(self class canvasHeight/2)+self scaleYOffset to: aMorph width@(self class canvasHeight/2)+self scaleYOffset
-		color: self scaleLineColor width: self scaleLineWidth.
-		LineMorph from: 0@self class canvasHeight + self scaleYOffset to: aMorph width@self class canvasHeight + self scaleYOffset
-		color: self scaleLineColor width: self scaleLineWidth.}
+	| section |
+	section := self class canvasHeight / (self numberScaleLines - 1).
+
+	^ (0 to: (self numberScaleLines - 1)) collect: [:i | 
+		self newScaleLineHeight: (section * i) + self scaleYOffset length: aMorph width]
 
 
 ]
 
+{ #category : #'visualization - constants' }
+SBLineChart >> numberScaleLines [
+
+	^ 5
+]
+
+{ #category : #'visualization - constants' }
+SBLineChart >> positiveGradientColor [
+
+	^ Color green
+]
+
 { #category : #'visualization - constants' }
 SBLineChart >> scaleYOffset [
 

diff --git a/packages/Sandblocks-Watch/SBVisualization.class.st b/packages/Sandblocks-Watch/SBVisualization.class.st
@@ -52,7 +52,7 @@ SBVisualization class >> newWithValues: traceValues [
 { #category : #constants }
 SBVisualization class >> preferredHeight [
 
-	^ 50 sbScaled 
+	^ 100 sbScaled 
 ]
 
 { #category : #conversion }
@@ -90,14 +90,16 @@ SBVisualization class >> visualizationObjectForValues: traceValues overMorph: tr
 { #category : #visualization }
 SBVisualization >> axisYNotation [
 
-	^ SBAxisNotation newFromScale: self scaleY ticking: 3 
+	^ SBAxisNotation newFromScale: self scaleY ticking: 5 
 ]
 
 { #category : #initialization }
 SBVisualization >> initialize [ 
 
 	super initialize.
 
+	self selectable: false.
+
 	self color: self drawnColor;
 		layoutPolicy: TableLayout new;
 		listDirection: #leftToRight;
@@ -134,7 +136,7 @@ SBVisualization >> newBackground [
 { #category : #'visualization - constants' }
 SBVisualization >> scaleLineColor [
 
-	^ self sandblockForegroundColor
+	^ self sandblockForegroundColor alpha: 0.3
 ]
 
 { #category : #'visualization - constants' }