package bonsai

  1. Overview
  2. Docs
package bonsai
Legend:
Page
Library
Module
Module type
Parameter
Class
Class type
Source

Source file bonsai_web_ui_gauge.ml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
open! Core
open Bonsai_web
module Svg = Virtual_dom_svg
open Vdom

module Styles =
  [%css
    stylesheet
      {|

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

|}]

let gauge ~radius ~(percent : Percent.t) ~percent_to_color =
  let percent_as_float = Percent.to_percentage percent in
  let stroke_width = radius *. 0.2 in
  let inner_radius = radius -. (stroke_width /. 2.) in
  let circumference = inner_radius *. 2.0 *. Float.pi in
  let arc = circumference *. (270. /. 360.) in
  let create_roundy_gauge_attr ~color ~extra_attr =
    Attr.many
      ([ Svg.Attr.cx radius
       ; Svg.Attr.cy radius
       ; Svg.Attr.fill (`Name "transparent")
       ; Svg.Attr.r inner_radius
       ; Svg.Attr.stroke color
       ; Svg.Attr.stroke_width stroke_width
       ; Svg.Attr.stroke_dasharray [ arc; circumference ]
       ; Svg.Attr.transform [ Rotate { a = `Deg 135.; x = radius; y = radius } ]
       ; Svg.Attr.stroke_linecap `Round
       ]
       @ extra_attr)
  in
  let base =
    Svg.Node.circle
      ~attrs:[ create_roundy_gauge_attr ~color:Tailwind_colors.gray200 ~extra_attr:[] ]
      []
  in
  let offset = arc -. (percent_as_float /. 100. *. arc) in
  let color =
    match percent_to_color with
    | Some f -> (f percent :> Css_gen.Color.t)
    | None -> (Tailwind_colors.blue500 :> Css_gen.Color.t)
  in
  let percent =
    Svg.Node.circle
      ~attrs:
        [ create_roundy_gauge_attr
            ~color
            ~extra_attr:[ Svg.Attr.stroke_dashoffset offset ]
        ]
      []
  in
  Svg.Node.svg
    ~attrs:[ Svg.Attr.height (radius *. 2.); Svg.Attr.width (radius *. 2.) ]
    [ base; percent ]
;;

let create ?percent_to_color ~radius percent =
  let gauge = gauge ~radius ~percent ~percent_to_color in
  Node.div ~attrs:[ Styles.wrapper ] [ gauge ]
;;
OCaml

Innovation. Community. Security.

GitHub Discord Twitter Peertube RSS
About
Changelog Releases Industrial Users Academic Users Why OCaml
Ecosystem
Packages Community Events OCaml Planet Jobs
Resources
Install OCaml Get Started Platform Tools Language Manual Standard Library API Books Exercises Papers OCaml Playground Logo
Policies
Carbon Footprint Governance Privacy Code of Conduct