Adds two visualizations: Line & Rectangle Chart

hpi-swa · Oct 18, 2023 · 21dd5b0 · 21dd5b0
1 parent fb12106
commit 21dd5b0
Show file tree

Hide file tree

Showing 7 changed files with 609 additions and 14 deletions.
diff --git a/packages/Sandblocks-Core/Collection.extension.st b/packages/Sandblocks-Core/Collection.extension.st
@@ -9,6 +9,24 @@ Collection >> asCollectionView: converter [
 		do: [SBCollection new interface: converter objectInterface object: self]
 ]
 
+{ #category : #'*Sandblocks-Core-converting' }
+Collection >> asLineChart: converter [
+	<convert>
+
+	converter
+		if: [self isString not and: [self isDictionary not and: [self allSatisfy: SBLineChart supportedInterface]]]
+		do: [SBLineChart newWithValues: self]
+]
+
+{ #category : #'*Sandblocks-Core-converting' }
+Collection >> asRectangleChart: converter [
+	<convert>
+
+	converter
+		if: [self isString not and: [self isDictionary not and: [self allSatisfy: SBRectangleChart supportedInterface]]]
+		do: [SBRectangleChart newWithValues: self]
+]
+
 { #category : #'*Sandblocks-Core' }
 Collection >> asSandblockShortcut [
 

diff --git a/packages/Sandblocks-Morphs/SBOwnTextMorph.class.st b/packages/Sandblocks-Morphs/SBOwnTextMorph.class.st
@@ -548,6 +548,12 @@ SBOwnTextMorph >> userString [
 	^ self contentsForEdit
 ]
 
+{ #category : #'as yet unclassified' }
+SBOwnTextMorph >> verySmall [
+
+	self font: (TextStyle default fontOfSize: 6 sbScaled)
+]
+
 { #category : #'as yet unclassified' }
 SBOwnTextMorph >> wantsKeyboardFocus [
 

diff --git a/packages/Sandblocks-Watch/SBAxisNotation.class.st b/packages/Sandblocks-Watch/SBAxisNotation.class.st
@@ -86,13 +86,20 @@ SBAxisNotation >> scale: aSBScale numberTicks: aNumber [
 SBAxisNotation >> visualize [
 
 	self submorphs copy do: #abandon.
-	self relativeTickHeights withIndexDo: [:aFraction :i | | annotation |
-		annotation := SBOwnTextMorph new 
-			contents: ((self scale scaledValueOfRelative: aFraction) asString);
-			layoutFrame: (LayoutFrame new topFraction: aFraction).
-		"Fraction 1 will result in the text being just underneath ourself, so substract height as offset"
-		(aFraction = 1) ifTrue: [annotation layoutFrame topOffset: (-1*(annotation minExtent y))].
-		self addMorph: annotation.]
+
+	self addAllMorphsBack: (
+		self relativeTickHeights do: [:aFraction | | annotation |
+			annotation := SBOwnTextMorph new 
+				contents: ((self scale domainValueOfRelative: aFraction) asFloat asString);
+				verySmall;
+				layoutFrame: (LayoutFrame new topFraction: (1 - aFraction)).
+
+			"Move text center to be fraction. 0 and 1 will be adjusted to align at the borders."
+			annotation layoutFrame topOffset: (-0.5*(annotation minExtent y)).
+			(aFraction = 1) ifTrue: [annotation layoutFrame topOffset: 0].
+			(aFraction = 0) ifTrue: [annotation layoutFrame topOffset: (-1*(annotation minExtent y))].
+
+			^ annotation])
 
 
 ]
diff --git a/packages/Sandblocks-Watch/SBLineChart.class.st b/packages/Sandblocks-Watch/SBLineChart.class.st
@@ -0,0 +1,163 @@
+Class {
+	#name : #SBLineChart,
+	#superclass : #SBVisualization,
+	#category : #'Sandblocks-Watch'
+}
+
+{ #category : #'initialize-release' }
+SBLineChart class >> newWithValues: traceValues [
+
+	| valuesToVisualize |
+	valuesToVisualize := traceValues 
+		ifEmpty: [#(0)]
+		ifNotEmpty: [traceValues].
+	^ self new
+		traceValues: valuesToVisualize;
+		scaleY: (SBScale 
+			newLinearScaleWithDomain: (valuesToVisualize min to: valuesToVisualize max) 
+			forRange: (0 to: self canvasHeight));
+		yourself
+]
+
+{ #category : #conversion }
+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 [
+
+	^ self sandblockForegroundColor
+]
+
+{ #category : #'visualization - constants' }
+SBLineChart >> datapointExtent [
+
+	^ 5@5
+]
+
+{ #category : #'visualization - constants' }
+SBLineChart >> datapointHigherPercentColor [
+
+	^ Color green
+]
+
+{ #category : #'visualization - constants' }
+SBLineChart >> datapointLowerPercentColor [
+
+	^ Color red
+]
+
+{ #category : #visualization }
+SBLineChart >> lineColorFrom: aPoint1 to: aPoint2 [
+
+	^ (aPoint1 y >= aPoint2 y) 
+		ifTrue: [self datapointHigherPercentColor]
+		ifFalse: [self datapointLowerPercentColor]
+]
+
+{ #category : #'visualization - constants' }
+SBLineChart >> lineWidth [
+
+	^ 2
+]
+
+{ #category : #visualization }
+SBLineChart >> newDataPoints [
+
+	^ self traceValues collectWithIndex: [:aTraceValue :index |
+		 self newDatapointFor: aTraceValue at: index]
+]
+
+{ #category : #visualization }
+SBLineChart >> newDatapointFor: aValue at: positionIndex [
+
+	"There is an extra Morph containing the datapoint itself so the tooltip is far easier to activate through more area"
+	^ Morph new
+		height: self class preferredHeight;
+		left: ((positionIndex - 0.5) * self spaceBetweenPoints) rounded;
+		width: self spaceBetweenPoints;
+		color: Color transparent;
+		balloonText: aValue printString;
+		addMorph: (EllipseMorph new
+			extent: self datapointExtent;
+			color: (self datapointColorForValue: aValue);
+			borderWidth: 0;
+			left: positionIndex * self spaceBetweenPoints;
+			top: self class canvasHeight - (self scaleY scaledValueOf: aValue);
+			yourself);
+		yourself
+
+
+
+]
+
+{ #category : #visualization }
+SBLineChart >> newLineFrom: aDataPointMorph1 to: aDataPointMorph2 [
+
+	^ LineMorph 
+		from: aDataPointMorph1 center 
+		to: aDataPointMorph2 center 
+		color: (self lineColorFrom: aDataPointMorph1 center to: aDataPointMorph2 center)
+		width: self lineWidth
+
+
+]
+
+{ #category : #visualization }
+SBLineChart >> newLinesForDatapointsOn: visualizationMorph [
+
+	^ visualizationMorph submorphs overlappingPairsCollect: [:oneDataPointMorph :anotherDataPointMorph | 
+		self 
+			newLineFrom: oneDataPointMorph firstSubmorph
+			to: anotherDataPointMorph firstSubmorph]
+]
+
+{ #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.}
+
+
+]
+
+{ #category : #'visualization - constants' }
+SBLineChart >> scaleYOffset [
+
+	^ self datapointExtent y / 2
+]
+
+{ #category : #'visualization - constants' }
+SBLineChart >> spaceBetweenPoints [
+
+	^ 15
+]
+
+{ #category : #visualization }
+SBLineChart >> visualizationMorph [
+
+	| visualizationMorph |
+	visualizationMorph := self newBackground.
+
+	visualizationMorph addAllMorphs: self newDataPoints.
+	visualizationMorph addAllMorphsBack: (self newLinesForDatapointsOn: visualizationMorph).
+	visualizationMorph addAllMorphsBack: (self newScaleLinesOn: visualizationMorph).
+
+	^ visualizationMorph
+]