Chart controls

package chartsdemo

import (
  "fmt"
  "net/http"
  "strconv"
  "strings"

  "github.com/a-h/templ"
  "github.com/araihu/goshtoso-charts/components/chartcontrol"
  "github.com/araihu/goshtoso-charts/components/line"
  "github.com/araihu/goshtoso/components/button"
  "github.com/araihu/goshtoso/components/checkbox"
  "github.com/araihu/goshtoso/components/form"
  rangeinput "github.com/araihu/goshtoso/components/range"
)

type staticState struct {
  Mode chartcontrol.WrapperMode
  ModeValue string
  Stroke int
  Area bool
  Errors []string
}

func staticStateFromRequest(r *http.Request) staticState {
  state := staticState{Mode: chartcontrol.WrapperModeEnabled, ModeValue: "enabled", Stroke: 3, Area: true}
  if r.URL.Query().Get("static_present") != "1" { return state }
  state.Area = r.URL.Query().Has("static_area")
  switch r.URL.Query().Get("static_mode") {
  case "enabled": state.Mode = chartcontrol.WrapperModeEnabled
  case "disabled": state.Mode, state.ModeValue = chartcontrol.WrapperModeDisabled, "disabled"
  case "hidden": state.Mode, state.ModeValue = chartcontrol.WrapperModeHidden, "hidden"
  case "omitted": state.Mode, state.ModeValue = chartcontrol.WrapperModeOmitted, "omitted"
  default: state.Errors = append(state.Errors, "Wrapper mode must be enabled, disabled, hidden, or omitted; enabled was restored.")
  }
  if stroke, err := strconv.Atoi(r.URL.Query().Get("static_stroke")); err == nil && stroke >= 1 && stroke <= 8 {
    state.Stroke = stroke
  } else {
    state.Errors = append(state.Errors, "Stroke width must be a whole number from 1 through 8; 3 was restored.")
  }
  return state
}

func staticConfig(state staticState) line.Config {
  minimum, noGap := 0.0, false
  area := line.AreaOptions{}
  if state.Area { area = line.AreaOptions{Enabled: true, Opacity: 150.0 / 255.0} }
  return line.Config{
    Label: "Controlled weekly email line",
    Caption: fmt.Sprintf("Seven exact values; %d px stroke; area fill %s; wrapper %s.", state.Stroke, onOff(state.Area), state.ModeValue),
    Title: line.Title{Text: "Weekly email"},
    Labels: []string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"},
    Series: []line.Series{{Name: "Email", Values: []float64{120, 132, 101, 134, 90, 230, 210}}},
    Area: area,
    XAxis: line.CategoryAxisOptions{BoundaryGap: &noGap},
    YAxes: []line.Axis{{Min: &minimum}},
    StrokeWidth: float64(state.Stroke), Width: 600, Height: 400,
    Controls: chartcontrol.Options{Mode: state.Mode, Fullscreen: true},
    Export: &chartcontrol.ExportOptions{Filename: "controlled-weekly-email"},
  }
}

func onOff(value bool) string { if value { return "on" }; return "off" }

func changeAttrs() templ.Attributes {
  return templ.Attributes{
    "hx-get": "/docs/chart-controls", "hx-target": "#static-chart-control-example",
    "hx-swap": "outerHTML focus-scroll:false", "hx-include": "closest form", "hx-trigger": "change",
  }
}

func falsePointer() *bool { value := false; return &value }

func StaticChartControlsHandler(w http.ResponseWriter, r *http.Request) {
  w.Header().Set("Content-Type", "text/html; charset=utf-8")
  if err := StaticChartControls(staticStateFromRequest(r)).Render(r.Context(), w); err != nil {
    http.Error(w, "render static chart controls", http.StatusInternalServerError)
  }
}

templ StaticChartControls(state staticState) {
  <div id="static-chart-control-example">
    @form.Form(form.Config{Action: "/docs/chart-controls#static-chart-control-example", Method: "get", PreventEnterSubmit: falsePointer(), HTMX: &form.HTMXConfig{Get: "/docs/chart-controls", Target: "#static-chart-control-example", Swap: "outerHTML focus-scroll:false"}}) {
      <input type="hidden" name="static_present" value="1"/>
      <label for="static-mode">Wrapper mode</label>
      <select id="static-mode" name="static_mode" { changeAttrs()... }>
        <option value="enabled" selected?={ state.ModeValue == "enabled" }>Enabled</option>
        <option value="disabled" selected?={ state.ModeValue == "disabled" }>Disabled</option>
        <option value="hidden" selected?={ state.ModeValue == "hidden" }>Hidden</option>
        <option value="omitted" selected?={ state.ModeValue == "omitted" }>Omitted</option>
      </select>
      @rangeinput.Range(rangeinput.Config{ID: "static-stroke", Name: "static_stroke", Label: "Stroke width", Value: strconv.Itoa(state.Stroke), Min: "1", Max: "8", InputAttrs: changeAttrs()})
      @checkbox.Checkbox(checkbox.Config{ID: "static-area", Name: "static_area", Value: "on", Label: "Fill area below line", Checked: state.Area, InputAttrs: changeAttrs()})
      @button.Button(button.WithType("submit"), button.WithID("static-apply")) { Apply static controls }
      if len(state.Errors) > 0 { <p role="alert">{ strings.Join(state.Errors, " ") }</p> }
      <p aria-live="polite">Applied: { state.ModeValue } wrapper, { strconv.Itoa(state.Stroke) } px stroke, area { onOff(state.Area) }.</p>
    }
    @line.Line(staticConfig(state))
  </div>
}

package chartsdemo

import (
  "fmt"
  "math"
  "math/rand"
  "net/http"
  "strconv"
  "strings"

  "github.com/a-h/templ"
  "github.com/araihu/goshtoso-charts/components/chartcontrol"
  interactive "github.com/araihu/goshtoso-charts/components/interactive"
  "github.com/araihu/goshtoso/components/button"
  "github.com/araihu/goshtoso/components/checkbox"
  "github.com/araihu/goshtoso/components/form"
  rangeinput "github.com/araihu/goshtoso/components/range"
)

type interactiveState struct {
  Orientation interactive.BarOrientation
  Scale int
  Labels bool
  Errors []string
}

func interactiveStateFromRequest(r *http.Request) interactiveState {
  state := interactiveState{Orientation: interactive.BarOrientationVertical, Scale: 100, Labels: true}
  if r.URL.Query().Get("interactive_present") != "1" { return state }
  state.Labels = r.URL.Query().Has("interactive_labels")
  switch r.URL.Query().Get("interactive_orientation") {
  case "vertical":
  case "horizontal": state.Orientation = interactive.BarOrientationHorizontal
  default: state.Errors = append(state.Errors, "Orientation must be vertical or horizontal; vertical was restored.")
  }
  if scale, err := strconv.Atoi(r.URL.Query().Get("interactive_scale")); err == nil && scale >= 50 && scale <= 150 && scale%10 == 0 {
    state.Scale = scale
  } else {
    state.Errors = append(state.Errors, "Value scale must be a 10% step from 50% through 150%; 100% was restored.")
  }
  return state
}

func fixedData(seed int64, scale int) []interactive.BarData {
  source := rand.New(rand.NewSource(seed))
  data := make([]interactive.BarData, 7)
  for index := range data {
    scaled := float64(source.Intn(300)) * float64(scale) / 100
    data[index].Value = math.Round(scaled * 10) / 10
  }
  return data
}

func interactiveConfig(state interactiveState) interactive.BarConfig {
  return interactive.BarConfig{
    Label: "Controlled weekly category bar",
    Caption: fmt.Sprintf("Fourteen exact values at %d%% scale; %s orientation; value labels %s.", state.Scale, state.Orientation, interactiveOnOff(state.Labels)),
    XAxis: []string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"},
    Series: []interactive.BarSeries{{Name: "Category A", Data: fixedData(11, state.Scale)}, {Name: "Category B", Data: fixedData(12, state.Scale)}},
    Orientation: state.Orientation,
    SeriesOptions: interactive.SeriesOptions{Label: &interactive.LabelOptions{Show: interactive.Bool(state.Labels), Position: "top"}},
    Options: interactive.ChartOptions{
      Title: &interactive.TitleOptions{Text: "Weekly categories"},
      Legend: &interactive.LegendOptions{Bottom: "0"},
      Tooltip: &interactive.TooltipOptions{Show: interactive.Bool(true), Trigger: "axis"},
      Controls: chartcontrol.Options{Fullscreen: true},
      Export: &chartcontrol.ExportOptions{Filename: "controlled-weekly-categories"},
    },
  }
}

func interactiveOnOff(value bool) string { if value { return "on" }; return "off" }

func interactiveChangeAttrs() templ.Attributes {
  return templ.Attributes{
    "hx-get": "/docs/chart-controls", "hx-target": "#interactive-chart-control-example",
    "hx-swap": "outerHTML focus-scroll:false", "hx-include": "closest form", "hx-trigger": "change",
  }
}

func interactiveFalsePointer() *bool { value := false; return &value }

func InteractiveChartControlsHandler(w http.ResponseWriter, r *http.Request) {
  w.Header().Set("Content-Type", "text/html; charset=utf-8")
  if err := InteractiveChartControls(interactiveStateFromRequest(r)).Render(r.Context(), w); err != nil {
    http.Error(w, "render interactive chart controls", http.StatusInternalServerError)
  }
}

templ InteractiveChartControls(state interactiveState) {
  <div id="interactive-chart-control-example">
    @form.Form(form.Config{Action: "/docs/chart-controls#interactive-chart-control-example", Method: "get", PreventEnterSubmit: interactiveFalsePointer(), HTMX: &form.HTMXConfig{Get: "/docs/chart-controls", Target: "#interactive-chart-control-example", Swap: "outerHTML focus-scroll:false"}}) {
      <input type="hidden" name="interactive_present" value="1"/>
      <label for="interactive-orientation">Orientation</label>
      <select id="interactive-orientation" name="interactive_orientation" { interactiveChangeAttrs()... }>
        <option value="vertical" selected?={ state.Orientation == interactive.BarOrientationVertical }>Vertical</option>
        <option value="horizontal" selected?={ state.Orientation == interactive.BarOrientationHorizontal }>Horizontal</option>
      </select>
      @rangeinput.Range(rangeinput.Config{ID: "interactive-scale", Name: "interactive_scale", Label: "Value scale (%)", Value: strconv.Itoa(state.Scale), Min: "50", Max: "150", Step: "10", InputAttrs: interactiveChangeAttrs()})
      @checkbox.Checkbox(checkbox.Config{ID: "interactive-labels", Name: "interactive_labels", Value: "on", Label: "Show value labels", Checked: state.Labels, InputAttrs: interactiveChangeAttrs()})
      @button.Button(button.WithType("submit"), button.WithID("interactive-apply")) { Apply interactive controls }
      if len(state.Errors) > 0 { <p role="alert">{ strings.Join(state.Errors, " ") }</p> }
      <p aria-live="polite">Applied: { string(state.Orientation) }, { strconv.Itoa(state.Scale) }% scale, labels { interactiveOnOff(state.Labels) }.</p>
    }
    @interactive.Bar(interactiveConfig(state))
  </div>
}

package chartsdemo

import (
  "fmt"
  "net/http"
  "strings"

  "github.com/a-h/templ"
  "github.com/araihu/goshtoso-charts/components/bar"
  "github.com/araihu/goshtoso-charts/components/chartcontrol"
  "github.com/araihu/goshtoso-charts/components/charttheme"
  "github.com/araihu/goshtoso-charts/components/heatmap"
  "github.com/araihu/goshtoso-charts/components/line"
  "github.com/araihu/goshtoso-charts/components/pie"
  "github.com/araihu/goshtoso/components/button"
  "github.com/araihu/goshtoso/components/form"
)

var customDefaults = [4]string{"#0e7490", "#2563eb", "#d97706", "#be123c"}

type paletteState struct {
  Palette charttheme.Palette
  Value string
  Colors [4]string
  Custom bool
  Errors []string
}

func paletteStateFromRequest(r *http.Request) paletteState {
  state := paletteState{Value: "theme", Colors: customDefaults}
  if r.URL.Query().Get("palette_present") != "1" { return state }
  switch value := r.URL.Query().Get("chart_palette"); value {
  case "theme": state.Value = value
  case "araihu": state.Palette, state.Value = charttheme.PaletteAraiHu, value
  case "bold": state.Palette, state.Value = charttheme.PaletteBold, value
  case "neutral": state.Palette, state.Value = charttheme.PaletteNeutral, value
  case "pastel": state.Palette, state.Value = charttheme.PalettePastel, value
  case "status": state.Palette, state.Value = charttheme.PaletteStatus, value
  case "custom":
    state.Value, state.Custom = value, true
    for index := range state.Colors {
      name := fmt.Sprintf("palette_color_%d", index+1)
      if !r.URL.Query().Has(name) { continue }
      color := strings.ToLower(strings.TrimSpace(r.URL.Query().Get(name)))
      if validHex(color) { state.Colors[index] = color } else {
        state.Errors = append(state.Errors, fmt.Sprintf("Color %d must use six-digit hexadecimal notation; %s was restored.", index+1, customDefaults[index]))
      }
    }
  default: state.Errors = append(state.Errors, "Palette must be theme, Arai Hû, bold, neutral, pastel, status, or custom; theme was restored.")
  }
  return state
}

func validHex(value string) bool {
  if len(value) != 7 || value[0] != '#' { return false }
  for _, character := range value[1:] {
    if !((character >= '0' && character <= '9') || (character >= 'a' && character <= 'f')) { return false }
  }
  return true
}

func style(state paletteState) charttheme.Style {
  result := charttheme.Style{Palette: state.Palette}
  if state.Custom { result.Colors = append([]string(nil), state.Colors[:]...) }
  return result
}

func lineConfig(state paletteState) line.Config {
  minimum, noGap := 0.0, false
  return line.Config{
    Label: "Shared-palette line and area", Caption: "Color 1 controls the line stroke and its translucent area.", Title: line.Title{Text: "Line"},
    Labels: []string{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"},
    Series: []line.Series{{Name: "Email", Values: []float64{120, 132, 101, 134, 90, 230, 210}}},
    Area: line.AreaOptions{Enabled: true, Opacity: 150.0 / 255.0},
    XAxis: line.CategoryAxisOptions{BoundaryGap: &noGap}, Legend: line.LegendOptions{Padding: line.Padding{Top: 5, Bottom: 10}}, YAxes: []line.Axis{{Min: &minimum}},
    Width: 600, Height: 400, Style: style(state), Controls: chartcontrol.Options{Fullscreen: true}, Export: &chartcontrol.ExportOptions{Filename: "shared-palette-line"},
  }
}

func barConfig(state paletteState) bar.Config {
  return bar.Config{
    Label: "Shared-palette grouped bars", Caption: "Colors 1 and 2 distinguish rainfall and evaporation.",
    Labels: []string{"Jan", "Feb", "Mar", "Apr", "May", "Jun"},
    Series: []bar.Series{
      {Name: "Rainfall", Values: []float64{2, 4.9, 7, 23.2, 25.6, 76.7}},
      {Name: "Evaporation", Values: []float64{2.6, 5.9, 9, 26.4, 28.7, 70.7}},
    },
    Title: "Bar Chart", Legend: bar.LegendOptions{Placement: bar.LegendPlacementEnd, Overlay: true},
    Width: 600, Height: 400, Style: style(state), Controls: chartcontrol.Options{Fullscreen: true}, Export: &chartcontrol.ExportOptions{Filename: "shared-palette-bars"},
  }
}

func pieConfig(state paletteState) pie.Config {
  colors := style(state)
  if state.Custom { colors.Colors = append(colors.Colors, state.Colors[0]) }
  return pie.Config{
    Label: "Shared-palette channel shares", Caption: "Palette order maps to sectors; Color 1 repeats for the fifth custom sector.",
    Title: pie.TitleOptions{Text: "Pie Chart", Subtitle: "(Fake Data)", Placement: pie.PlacementCenter, FontSize: 16, SubtitleFontSize: 10},
    Legend: pie.LegendOptions{Orientation: pie.LegendVertical, LeftPercent: 80, VerticalPlacement: pie.VerticalPlacementBottom, FontSize: 10},
    Padding: pie.Padding{Top: 20, Right: 20, Bottom: 20, Left: 20},
    Slices: []pie.Slice{{Name: "Search Engine", Value: 1048}, {Name: "Direct", Value: 735}, {Name: "Email", Value: 580}, {Name: "Union Ads", Value: 484}, {Name: "Video Ads", Value: 300}},
    Width: 600, Height: 400, Style: colors, Controls: chartcontrol.Options{Fullscreen: true}, Export: &chartcontrol.ExportOptions{Filename: "shared-palette-pie", Background: chartcontrol.ExportBackgroundTransparent},
  }
}

func heatMapConfig(state paletteState) heatmap.Config {
  config := heatmap.Config{
    Label: "Shared-palette heat map", Caption: "The same palette becomes an ordered cold-to-warm value gradient.", Title: "Heat Map Chart",
    XAxis: heatmap.Axis{Title: "X-Axis", Labels: []string{"0", "1", "2", "3", "4"}}, YAxis: heatmap.Axis{Title: "Y-Axis", Labels: []string{"0", "1", "2", "3", "4"}},
    Rows: [][]float64{{4.4, 4.9, 7, 7.5, 4.3}, {2.6, 5.9, 9, 6.4, 2.3}, {3.3, 6.4, 7, 4.9, 3.2}, {1.9, 6, 9, 5.9, 2.6}, {4.4, 5.9, 7, 6.4, 4.6}},
    ValueRange: heatmap.ValueRange{Min: 1.9, Max: 9}, Width: 600, Height: 400,
    Style: charttheme.Style{Palette: state.Palette}, Controls: chartcontrol.Options{Fullscreen: true}, Export: &chartcontrol.ExportOptions{Filename: "shared-palette-heat-map"},
  }
  if state.Custom { config.Gradient = heatmap.Gradient{Stops: []heatmap.GradientStop{
    {At: 0, Color: state.Colors[0]}, {At: 1.0 / 3.0, Color: state.Colors[1]},
    {At: 2.0 / 3.0, Color: state.Colors[2]}, {At: 1, Color: state.Colors[3]},
  }} }
  return config
}

func paletteChangeAttrs() templ.Attributes {
  return templ.Attributes{"hx-get": "/docs/chart-controls", "hx-target": "#palette-chart-control-example", "hx-swap": "outerHTML focus-scroll:false", "hx-include": "closest form", "hx-trigger": "change"}
}

func paletteFalsePointer() *bool { value := false; return &value }

func PaletteChartsHandler(w http.ResponseWriter, r *http.Request) {
  w.Header().Set("Content-Type", "text/html; charset=utf-8")
  if err := PaletteCharts(paletteStateFromRequest(r)).Render(r.Context(), w); err != nil { http.Error(w, "render palette charts", http.StatusInternalServerError) }
}

templ PaletteCharts(state paletteState) {
  <div id="palette-chart-control-example">
    @form.Form(form.Config{ID: "palette-chart-control-form", Action: "/docs/chart-controls#palette-chart-control-example", Method: "get", PreventEnterSubmit: paletteFalsePointer(), HTMX: &form.HTMXConfig{Get: "/docs/chart-controls", Target: "#palette-chart-control-example", Swap: "outerHTML focus-scroll:false"}}) {
      <input type="hidden" name="palette_present" value="1"/>
      <label for="chart-palette">Chart palette</label>
      <select id="chart-palette" name="chart_palette" { paletteChangeAttrs()... }>
        <option value="theme" selected?={ state.Value == "theme" }>Theme tokens</option>
        <option value="araihu" selected?={ state.Value == "araihu" }>Arai Hû</option>
        <option value="bold" selected?={ state.Value == "bold" }>Bold</option>
        <option value="neutral" selected?={ state.Value == "neutral" }>Neutral</option>
        <option value="pastel" selected?={ state.Value == "pastel" }>Pastel</option>
        <option value="status" selected?={ state.Value == "status" }>Status</option>
        <option value="custom" selected?={ state.Value == "custom" }>Custom four colors</option>
      </select>
      for index, color := range state.Colors {
        <label for={ fmt.Sprintf("palette-color-%d", index+1) }>Color { fmt.Sprintf("%d", index+1) }</label>
        <input id={ fmt.Sprintf("palette-color-%d", index+1) } type="color" name={ fmt.Sprintf("palette_color_%d", index+1) } value={ color } disabled?={ !state.Custom } { paletteChangeAttrs()... }/>
      }
      @button.Button(button.WithType("submit"), button.WithID("palette-apply")) { Apply palette }
      if len(state.Errors) > 0 { <p role="alert">{ strings.Join(state.Errors, " ") }</p> }
	  <p aria-live="polite">Applied palette: { state.Value }.</p>
    }
    <div class="grid gap-5 lg:grid-cols-2">
      @line.Line(lineConfig(state))
      @bar.Bar(barConfig(state))
      @pie.Pie(pieConfig(state))
      @heatmap.HeatMap(heatMapConfig(state))
    </div>
  </div>
}