Add markerStyles and showLines properties to line graph widget

Monte Goulding · Monte Goulding · commit aa0d7eef44be · 2016-07-11T23:59:54.000+10:00
diff --git a/extensions/widgets/graph/graph.lcb b/extensions/widgets/graph/graph.lcb
@@ -40,7 +40,7 @@ use com.livecode.library.widgetutils
 
 -- adding metadata to ensure the extension displays correctly in LiveCode
 metadata author is "LiveCode"
-metadata version is "1.0.2"
+metadata version is "1.1.0"
 metadata title is "Line Graph"
 metadata preferredSize is "300,175"
 metadata svgicon is "M50.6,27.2h-2.2v-3.3l0.8-0.5l-0.2-0.3h2.9v-1h-3.5v-5h3.5v-1h-3.5v-5h3.5v-1h-3.5v-5h3.5v-1h-3.5V1.8h-1v2.4h-10V1.8h-1v2.4h-10V1.8h-1v2.4h-10V1.8h-1v2.4H5V2.5C5,1.1,3.9,0,2.5,0S0,1.1,0,2.5v29.7h50.6c1.4,0,2.5-1.1,2.5-2.5C53.1,28.4,52,27.2,50.6,27.2z M47.4,27.2h-10v-4.1h8l1.2,1.9l0.8-0.5V27.2z M15.4,15.2l1.4,0.9h-1.4V15.2z M14.4,17.1v5h-4.2l3.6-5H14.4z M15.4,17.1h2.9l7.1,4.6v0.4h-10V17.1z M26.4,17.1h0.1l-0.1,0.2V17.1z M25.4,18.1l-1.6-1h1.6V18.1z M26.4,22l4-4.9h6v5h-10V22z M37.4,17.1h4.2l3.2,5h-7.4V17.1z M37.4,16.1v-5h0.4l3.2,5H37.4z M36.4,10.1h-0.1l0.1-0.2V10.1z M36.4,11.1v5h-5.1l4.2-5H36.4z M27.4,16.1h-1v-5h5.1L27.4,16.1z M25.4,16.1h-3.1l-6.9-4.5v-0.5h10V16.1z M14.4,11.3l-3.5,4.9H5v-5h9.4V11.3z M10.1,17.1l-3.6,5H5v-5H10.1z M5.7,23.1l-0.7,1v-1H5.7z M9.5,23.1h4.9v4.1H6.5L9.5,23.1z M15.4,23.1h10v4.1h-10V23.1z M26.4,23.1h10v4.1h-10V23.1z M47.4,20.7l-2.3-3.6h2.3V20.7z M47.4,16.1h-2.9l-3.2-5h6.1V16.1z M47.4,10.1h-6.7l-3.2-5h9.9V10.1z M36.4,5.1v0.1l-4,4.9h-6v-5H36.4z M25.4,5.1v5h-10v-5H25.4z M14.4,5.1v5H5v-5H14.4z"
@@ -67,8 +67,8 @@ The <graphData> is the data to be displayed by the graph widget.
 
 Each line of the <graphData> should be a a comma delimited list.  The
 first item of each line is the label for that point on the x-axis.
-The second and following items are the values corresponding to that
-label for one of the graph's lines.
+The second and following items are the values for each series of data
+to plot.
 */
 property graphData get getData set setData
 metadata graphData.editor is "com.livecode.pi.text"
@@ -144,6 +144,61 @@ property graphYLines get mGridVShow set setYLinesVisibility
 metadata graphYLines.default is "true"
 metadata graphYLines.label is "Vertical grid lines"
 
+/**
+Summary: Whether chart lines are displayed
+
+Syntax:
+set the showLines of <widget> to { true | false }
+get the showLines of <widget>
+
+Value (boolean): True if lines should be shown; false otherwise
+
+Description:
+If true, the graph widget will draw graph lines on the graph.
+
+Related: markerStyles (property)
+
+*/
+property showLines get mLinesShow set SetLineVisibility
+metadata showLines.default is "true"
+metadata showLines.label is "Show graph lines"
+metadata showLines.section is "Basic"
+
+/**
+Summary: Set the marker style for each data series
+
+Syntax:
+set the markerStyles of <widget> to { <string> | empty }
+get the markerStyles of <widget>
+
+Summary: The marker styles for drawing vertices on the graph
+
+Value(String): A line-delimited list of the marker styles for each line
+on the graph
+
+Description:
+The <markerStyles> are the marker styles of each line in the graph
+widget.
+
+If set to empty then no markers will be shown and
+showLines will be set to true. Available marker styles may be one of:
+
+- "filled circle"
+- "filled square"
+- "filled diamond"
+- "circle"
+- "square"
+- "diamond"
+
+By default the markerStyles will repeat in the above order.
+
+Related: showLines (property)
+*/
+property markerStyles get GetMarkerStyles set SetMarkerStyles
+metadata markerStyles.default is "filled circle\nfilled square\nfilled diamond"
+metadata markerStyles.editor is "com.livecode.pi.text"
+metadata markerStyles.label is "Marker styles"
+
 /**
 Summary: The coordinates of a highlighted point on the graph
 
@@ -196,6 +251,9 @@ private variable mLegendShow as Boolean
 private variable mLabelXShow as Boolean
 private variable mLabelYShow as Boolean
 private variable mVerticesShow as Boolean
+private variable mLinesShow as Boolean
+
+private variable mMarkerStyles as List
 
 private variable mYMax as Number
 private variable mYMin as Number
@@ -244,8 +302,11 @@ public handler OnCreate() returns nothing
 	put true into mLegendShow
 	put true into mLabelXShow
 	put true into mLabelYShow
+	put true into mLinesShow
 	put true into mVerticesShow
 	
+	put [] into mMarkerStyles
+	
    put my height into mHeight
    put my width into mWidth
 
@@ -293,6 +354,9 @@ public handler OnSave(out rProperties as Array)
 	put mGridVShow into rProperties["graphYLines"]
 	put GetHilitedCoordinates() into rProperties["hilitedCoordinates"]
 	put mHilitedCoordinatesColor into rProperties["hilitedCoordinatesColor"]
+	put mVerticesShow into rProperties["showMarkers"]
+	put mMarkerStyles into rProperties["markerStyles"]
+	put mLinesShow into rProperties["showLines"]
 end handler
 
 -- Process saved data array and re-set properties accordingly
@@ -315,6 +379,16 @@ public handler OnLoad(in pProperties as Array)
 	if "hilitedCoordinatesColor" is among the keys of pProperties then
 		SetHilitedCoordinatesColor(pProperties["hilitedCoordinatesColor"])
 	end if
+	if "showLines" is among the keys of pProperties then
+		SetLineVisibility(pProperties["showLines"])
+	end if
+	if "showMarkers" is among the keys of pProperties then
+		put pProperties["showMarkers"] into mVerticesShow
+	end if
+	if "markerStyles" is among the keys of pProperties then
+		put pProperties["markerStyles"] into mMarkerStyles
+	end if
+	EnsureMarkerStyles()
 end handler
 
 ----------
@@ -374,6 +448,7 @@ public handler setData(in pData as String) returns nothing
 	put tNewData into mData
 	put [] into mHilitedCoordinates
 	put true into mRecalculateAll
+	EnsureMarkerStyles()
 	redraw all
 end handler
 ----------
@@ -410,6 +485,50 @@ public handler setYLinesVisibility(in pShowYGridLines as Boolean) returns nothin
 	redraw all
 end handler
 
+public handler SetLineVisibility(in pShowLines as Boolean) returns nothing
+	put pShowLines into mLinesShow
+	if not pShowLines then
+		put true into mVerticesShow
+		EnsureMarkerStyles()
+	end if
+	redraw all
+end handler
+
+public handler GetMarkerStyles() returns String
+	if mMarkerStyles is [] then
+		return ""
+	end if
+	
+	variable tMarkerStyles as String
+	combine mMarkerStyles with newline into tMarkerStyles
+	return tMarkerStyles
+end handler
+
+public handler SetMarkerStyles(in pMarkerStyles as String) returns nothing
+	if pMarkerStyles is "" then
+		put true into mLinesShow
+		put [] into mMarkerStyles
+		put false into mVerticesShow
+	else
+		split pMarkerStyles by newline into mMarkerStyles
+		put true into mVerticesShow
+		EnsureMarkerStyles()
+	end if
+	redraw all
+end handler
+
+public handler EnsureMarkerStyles() returns nothing
+	if mVerticesShow and the number of elements in mMarkerStyles < the number of elements in mData - 1 then
+		variable tStyles as List
+		put ["filled circle", "filled square", "filled diamond", "circle", "square", "diamond"] into tStyles
+		
+		variable tCount as Integer
+		repeat with tCount from the number of elements in mMarkerStyles + 1 up to the number of elements in mData - 1
+			push tStyles[tCount mod 6 + 1] onto back of mMarkerStyles
+		end repeat
+	end if
+end handler
+
 public handler GetHilitedCoordinates() returns String
 	if mHilitedCoordinates is [] then
 		return ""
@@ -944,20 +1063,43 @@ private handler drawGraph() returns nothing
 				put the bottom of mGridRect - the height of mGridRect * tHeightRatio into tPointY
 				put point [tPointX, tPointY] into tPoint
 				
-				if tPointIndex is 1 then
-					move to tPoint on tPath
-				else
-					line to tPoint on tPath
+				if mLinesShow is true then
+					if tPointIndex is 1 then
+						move to tPoint on tPath
+					else
+						line to tPoint on tPath
+					end if
 				end if
 
 				// Draw vertices
 				if mVerticesShow is true then
-					add circle path centered at tPoint with radius 3 to tPathVertices
-				end if
+					variable tMarkerPath as Path
+					if mMarkerStyles[tGraphLine - 1] contains "circle" then
+						put circle path centered at point [0,0] with radius 3 into tMarkerPath
+					else
+						put rectangle path of rectangle [-3,-3,3,3] into tMarkerPath
+					end if
+					
+					if mMarkerStyles[tGraphLine - 1] contains "diamond" then
+						rotate tMarkerPath by 45
+					end if
+					
+					translate tMarkerPath by [tPointX, tPointY]
+               add tMarkerPath to tPathVertices
+            end if
 			end if
 		end repeat
-		stroke tPath on this canvas
-		fill tPathVertices on this canvas
+		if mLinesShow is true then
+			stroke tPath on this canvas
+		end if
+		
+		if mVerticesShow is true and mMarkerStyles[tGraphLine - 1] is not "" then
+			if mMarkerStyles[tGraphLine - 1] contains "filled" then
+				fill tPathVertices on this canvas
+			else
+				stroke tPathVertices on this canvas
+			end if
+		end if
 	end repeat
 
 	// Draw Axis lines
diff --git a/extensions/widgets/graph/notes/feature-markerstyles.md b/extensions/widgets/graph/notes/feature-markerstyles.md
@@ -0,0 +1,14 @@
+# Marker styles
+
+The markerStyles of the line graph can now be set to a return delimited
+list of:
+
+- circle
+- filled circle
+- square
+- filled square
+- diamond
+- filled diamond
+
+Setting the markerStyles to empty will cause the lines of the chart to
+draw without markers and set the showLines of the chart to true.
diff --git a/extensions/widgets/graph/notes/feature-showlines.md b/extensions/widgets/graph/notes/feature-showlines.md
@@ -0,0 +1,4 @@
+# Show and hide the graph lines
+
+Setting the showLines of the graph to false will draw the point markers
+but not the connecting lines turning the graph into a scatter plot.
