search

brownplt / code.pyret.org

Website for serving Pyret to folks.
Other
24 stars 45 forks source link

Stacked bar chart - Continuation #417

Closed JohnUUU closed 2 years ago

JohnUUU commented 2 years ago

Notable Code Changes

This is a continuation of https://github.com/brownplt/code.pyret.org/pull/369 mainly focused on fleshing out the methods of the other chart series. Most of the methods changed below have already been documented at https://github.com/brownplt/pyret-docs/pull/63 if you want to see the documentation there.

New Constructors

To have the line-plot-series constructors mirror the scatter-plot-series constructors I added 2 new constructors

  1. labeled line plot - Gives labels to each point in the line plot series (Constructor) from-list.labeled-line-plot(labels :: List<String>, xs :: List<Number>, ys :: List<Number>)

    Screen Shot 2022-01-18 at 3 39 08 PM

  2. image line plot - Centers images around each point in the line plot series (Constructor) from-list.image-line-plot :: (images :: List<Image>, xs :: List<Number>, ys :: List<Number>)

    Screen Shot 2022-01-18 at 3 41 53 PM

New Data Types

  1. StackType - [grouped, absolute, relative, percent]. Describes how bar chart components are displayed together.
  2. TrendlineType - [no-trendline, linear, exponential, polynomial(degree)] Describes the equation type used to estimate the trenlines of the points in the line-plot-series or scatter-plot-series
  3. PointShape - [circle-shape, regular-polygon-shape(sides, dent)] Describes the shape of the points in the line-plot-series or scatter-plot-series.

Data Series Methods Implemented

We implemented the following methods.

Line Plot Series:

  1. labels - Adds labels to the points of the line plot series (Method) line-plot-series.labels(labels :: List<String>)

    Screen Shot 2022-01-18 at 5 36 13 PM

  2. image-labels - Centers images around each point in the line plot series (Method) line-plot-series.image-labels(images :: List<Image>)

    Screen Shot 2022-01-18 at 5 38 12 PM

  3. curved - Curves the lines between the points of the line plot series line-plot-series.curved(curved :: Boolean)

    Screen Shot 2022-01-18 at 5 46 54 PM

  4. linewidth - Changes the line width of the lines between the points of the line plot series line-plot-series.linewidth(width :: Number)

    Screen Shot 2022-01-18 at 7 46 03 PM

  5. dashed-line - Makes the lines between the points of the line plot series dashed instead of solid line-plot-series.dashed-line(dashed :: Boolean)

    Screen Shot 2022-01-18 at 7 55 08 PM

  6. dashline-style - Makes the lines dashed with a style with an on-and-off pattern for dashed lines. For example: [list: 5, 1, 3] will repeat a 5-length dash, a 1-length gap, a 3-length dash, a 5-length gap, a 1-length dash, and a 3-length gap. line-plot-series.dashline-style(style :: List<Number>)

    Screen Shot 2022-01-18 at 7 59 04 PM

  7. point-shape - Gives a new shape for each point. Either a circle or a regular polygon with a specified dent inward or outward. line-plot-series .point-shape(shape :: PointShape)

    line-plot-point-shape-example

  8. point-size - Gives a new size for each point in the data series. line-plot-series.point-size(point-size :: Number)

    Screen Shot 2022-01-18 at 8 17 00 PM

  9. trendline-type - Creates a new trendline using the data points with the given type of equation. line-plot-series.trendline-type(type :: TrendlineType)

    line-plot-trendline-type-example

  10. trendline-color - Gives the new trendline a new color. line-plot-series.trendline-color(color :: Color)

    Screen Shot 2022-01-18 at 8 22 53 PM

  11. trendline-width - Gives the new trendline a new line width. line-plot-series.trendline-width(width :: Number)

    Screen Shot 2022-01-18 at 8 24 52 PM

12.trendline-opacity - Gives the new trendline a new opacity. line-plot-series.trendline-opacity(opacity :: Number)

Screen Shot 2022-01-18 at 8 27 03 PM

Scatter Plot Series:

  1. labels - Adds labels to the points of the scatter plot series (Method) scatter-plot-series.labels(labels :: List<String>)

    Screen Shot 2022-01-18 at 8 38 50 PM

  2. image-labels - Centers images around each point in the scatter plot series (Method) scatter-plot-series.image-labels(images :: List<Image>)

    Screen Shot 2022-01-18 at 9 11 12 PM

  3. point-shape - Gives a new shape for each point. Either a circle or a regular polygon with a specified dent inward or outward. scatter-plot-series .point-shape(shape :: PointShape) image

  4. trendline-type - Creates a new trendline using the data points with the given type of equation. scatter-plot-series.trendline-type(type :: TrendlineType) image

  5. trendline-color - Gives the new trendline a new color. scatter-plot-series.trendline-color(color :: Color)

    Screen Shot 2022-01-18 at 9 13 56 PM

  6. trendline-width - Gives the new trendline a new line width. scatter-plot-series.trendline-width(width :: Number)

    Screen Shot 2022-01-18 at 9 14 44 PM

  7. trendline-opacity - Gives the new trendline a new opacity. scatter-plot-series.trendline-opacity(opacity :: Number)

    Screen Shot 2022-01-18 at 9 15 19 PM

Pie Chart Series:

  1. explode - Explodes the pie chart slices by the specified offsets. pie-chart-series.explode(offsets :: List<Number>)

    Screen Shot 2022-01-18 at 9 26 27 PM

  2. colors - Colors the pie chart slices by the specified colors. pie-chart-series.colors(colors :: List<Color>)

    Screen Shot 2022-01-18 at 9 37 48 PM

  3. threeD - Makes the pie chart 3 dimensional instead of 2 dimensional pie-chart-series.threeD(three-d :: Boolean)

    Screen Shot 2022-01-18 at 9 38 50 PM

  4. piehole - Creates a hole in the middle of the pie chart thus effectively making a donut pie chart. pie-chart-series.piehole(hole :: Number)

    Screen Shot 2022-01-18 at 9 39 09 PM

  5. rotate - Rotates the place where the starting slice is created from. pie-chart-series.rotate(angle :: Number)

    Screen Shot 2022-01-18 at 9 39 32 PM

  6. collapse-threshold - Collapses slices under threshold into a combined other slice. `pie-chart-series.collapse-threshold(threshold :: Number)

    Screen Shot 2022-01-18 at 9 39 48 PM

Histogram Series:

  1. labels - Adds labels to the boxes of the histogram series (Method) histogram-series.labels(labels :: List<String>)

    Screen Shot 2022-01-18 at 9 47 50 PM

  2. color - Gives the histogram boxes a new color. histogram-series.color(color :: Color)

    Screen Shot 2022-01-18 at 9 48 09 PM

Box Plot Series:

1.labels - Adds labels to the boxes of the box-plot (Method) box-plot-series.labels(labels :: List<String>)

Screen Shot 2022-01-18 at 9 50 40 PM
  1. color - Gives the boxes in the box-plot a new color. box-plot-series.color(color :: Color) Screen Shot 2022-01-18 at 9 51 02 PM

Plot Chart Window:

  1. gridlines-minspacing - Manually sets the minimum spacing between major gridlines. plot-chart-window.gridlines-minspacing(min-spacing :: Number)

    Screen Shot 2022-01-18 at 9 55 51 PM

  2. gridlines-color - Manually sets the color of the major gridlines. plot-chart-window.gridlines-color(color :: Color)

    Screen Shot 2022-01-18 at 9 59 09 PM

  3. show-minor-gridlines - Displays the minor gridlines alongside the major gridlines. plot-chart-window.show-minor-gridlines(show :: Boolean)

    Screen Shot 2022-01-18 at 10 02 16 PM

  4. minor-gridlines-minspacing - Manually sets the minimum spacing between minor gridlines. plot-chart-window.minor-gridlines-minspacing(min-spacing :: Number)

    Screen Shot 2022-01-18 at 10 05 41 PM

  5. .minor-gridlines-color - Manually sets the color of the minor gridlines. plot-chart-window.minor-gridlines-color(color :: Color)

    Screen Shot 2022-01-18 at 10 11 34 PM

  6. select-multiple - Allows the user to select multiple points at a time plot-chart-window.select-multiple(multiple :: Boolean)

    Screen Shot 2022-01-18 at 10 14 50 PM

Chart Window (ALL):

  1. .background-color - Manually sets the background color of the chart window. chart-window.background-color(color :: Color)

    Screen Shot 2022-01-18 at 10 17 58 PM

  2. .border-size - Manually sets the border size of the chart window. chart-window.border-size(border :: Number)

    Screen Shot 2022-01-18 at 10 24 16 PM

  3. *.border-color - Manually sets the border color of the chart window. chart-window.border-color(color :: Color)

    Screen Shot 2022-01-18 at 10 25 28 PM

Issues

  1. Render-charts does not work as intended with many of the new methods implemented. For some, like .curved or .image-labels the methods just do nothing. Other methods like .linewidth and .dashline-style seem to affect every DataSeries of the same type! Overall just funky behavior.
  2. The image-label constructors and methods may be a bit unstable since they are dependent on directly grabbing the children of the SVG dom and their location can change. I know this was mentioned in a comment in the code but I just thought it was worth re-mentioning here since it did happen.