Midwest Component Library v0.24.0

Previews

No matching results.

x
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<div class="midwest-grid fit" style="--grid-width: 200px; --grid-gap: 2rem">
  <article data-controller="midwest-card" class="midwest-card midwest-stat has-sparkline">
    <div class="wrap">
      <section>
        <div class="stat-content">
          <div class="stat-value">1,284</div>
          <div class="stat-label">Total users</div>
        </div>
      </section>
      <footer>        
        <div class="stat-meta">
          <div class="stat-trend trend-up">
            <span class="midwest-badge has-icon size-sm theme-green trend-value">
              <div class="midwest-icon ">
                <div class="midwest-icon-inner">
                  <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Arrow up circle"><title>Arrow up circle</title>
                    <path d="M256 48C141.13 48 48 141.13 48 256s93.13 208 208 208 208-93.13 208-208S370.87 48 256 48zm91.36 212.65a16 16 0 01-22.63.09L272 208.42V342a16 16 0 01-32 0V208.42l-52.73 52.32A16 16 0 11164.73 238l80-79.39a16 16 0 0122.54 0l80 79.39a16 16 0 01.09 22.65z"></path></svg>
                </div>
              </div>
              <span class="value">+12.5%</span>
            </span>            </div>
          <div class="stat-comparison">
            <span class="stat-comparison-value">1,142</span>
            <span class="stat-comparison-label">vs last month</span>
          </div>
        </div>
        <div class="stat-sparkline">
          <figure class="midwest-chart chart-type-line is-sparkline" data-controller="midwest-chart" data-midwest-chart-tooltip-enabled-value="false">
            <svg
      viewBox="0 0 160 40"
      width="160"
      height="40"
      role="img"
      aria-label=""
      class="chart-svg"
      data-midwest-chart-target="svg">
              <title></title>
              <desc>Total users; 8 data points</desc>
              <g class="chart-lines">
                <g class="chart-series">
                  <path d="M 51,34.72 L 65,28.96 L 79,31.2 L 93,22.56 L 107,18.08 L 121,14.11 L 135,9.76 L 149,5.02" stroke="var(--stat-up-color)" fill="none" stroke-width="2" class="chart-line" style="--i: 0; --path-length: 104.46" />
                </g>
              </g>
            </svg>
          </figure>
        </div>
      </footer>
    </div>
  </article>
  <article data-controller="midwest-card" class="midwest-card midwest-stat has-sparkline">
    <div class="wrap">
      <section>
        <div class="stat-content">
          <div class="stat-value">$4,820</div>
          <div class="stat-label">Revenue</div>
        </div>
      </section>
      <footer>        
        <div class="stat-meta">
          <div class="stat-trend trend-down">
            <span class="midwest-badge has-icon size-sm theme-red trend-value">
              <div class="midwest-icon ">
                <div class="midwest-icon-inner">
                  <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Arrow down circle"><title>Arrow down circle</title>
                    <path d="M256 464c114.87 0 208-93.13 208-208S370.87 48 256 48 48 141.13 48 256s93.13 208 208 208zm-91.36-212.65a16 16 0 0122.63-.09L240 303.58V170a16 16 0 0132 0v133.58l52.73-52.32A16 16 0 11347.27 274l-80 79.39a16 16 0 01-22.54 0l-80-79.39a16 16 0 01-.09-22.65z"></path></svg>
                </div>
              </div>
              <span class="value">-3.2%</span>
            </span>            </div>
          <div class="stat-comparison">
            <span class="stat-comparison-value">$4,980</span>
            <span class="stat-comparison-label">vs last month</span>
          </div>
        </div>
        <div class="stat-sparkline">
          <figure class="midwest-chart chart-type-area is-sparkline" data-controller="midwest-chart" data-midwest-chart-tooltip-enabled-value="false">
            <svg
      viewBox="0 0 160 40"
      width="160"
      height="40"
      role="img"
      aria-label=""
      class="chart-svg"
      data-midwest-chart-target="svg">
              <title></title>
              <desc>Revenue; 8 data points</desc>
              <g class="chart-areas">
                <g class="chart-series">
                  <path d="M 51.0,4.0 L 65.0,12.0 L 79.0,16.0 L 93.0,21.6 L 107.0,28.0 L 121.0,21.6 L 135.0,30.4 L 149.0,34.4 L 149.0,36.0 L 51.0,36.0 Z" fill="var(--stat-down-color)" fill-opacity="0.2" stroke="none" class="chart-area-fill" style="--i: 0; --path-length: 107.65" />
                  <path d="M 51,4 L 65,12 L 79,16 L 93,21.6 L 107,28 L 121,21.6 L 135,30.4 L 149,34.4" stroke="var(--stat-down-color)" fill="none" stroke-width="2" class="chart-line" style="--i: 0; --path-length: 107.65" />
                </g>
              </g>
            </svg>
          </figure>
        </div>
      </footer>
    </div>
  </article>
  <article data-controller="midwest-card" class="midwest-card midwest-stat theme-blue has-sparkline">
    <div class="wrap">
      <section>
        <div class="midwest-icon stat-icon" aria-hidden="true">
          <div class="midwest-icon-inner">
            <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><path d="M432 272a48.09 48.09 0 00-45.25 32h-39.22l-28.35-85.06a16 16 0 00-30.56.66l-44.51 155.76-52.33-314a16 16 0 00-31.3-1.25L99.51 304H48a16 16 0 000 32h64a16 16 0 0015.52-12.12l45.34-181.37 51.36 308.12A16 16 0 00239.1 464h.91a16 16 0 0015.37-11.6l49.8-174.28 15.64 46.94A16 16 0 00336 336h50.75A48 48 0 10432 272z"></path></svg>
          </div>
        </div>
        <div class="stat-content">
          <div class="stat-value">98.6%</div>
          <div class="stat-label">Uptime</div>
        </div>
      </section>
      <footer>
        <div class="stat-sparkline">
          <figure class="midwest-chart chart-type-line is-sparkline" data-controller="midwest-chart" data-midwest-chart-tooltip-enabled-value="false">
            <svg
      viewBox="0 0 160 40"
      width="160"
      height="40"
      role="img"
      aria-label=""
      class="chart-svg"
      data-midwest-chart-target="svg">
              <title></title>
              <desc>Uptime; 8 data points</desc>
              <g class="chart-lines">
                <g class="chart-series">
                  <path d="M 51,4 L 65,20 L 79,4 L 93,36 L 107,4 L 121,20 L 135,4 L 149,4" stroke="var(--blue-9)" fill="none" stroke-width="2" class="chart-line" style="--i: 0; --path-length: 168.9" />
                </g>
              </g>
            </svg>
          </figure>
        </div>
      </footer>
    </div>
  </article>
</div>
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
<%= midwest_grid(fit: true) do %>
  <%= render Midwest::StatComponent.new(
    value: '1,284',
    label: 'Total users',
    trend: '+12.5%',
    comparison: '1,142',
    comparison_label: 'vs last month',
    sparkline: [820, 910, 875, 1010, 1080, 1142, 1210, 1284]
  ) %>
  <%= render Midwest::StatComponent.new(
    value: '$4,820',
    label: 'Revenue',
    trend: '-3.2%',
    comparison: '$4,980',
    comparison_label: 'vs last month',
    sparkline: { data: [5200, 5100, 5050, 4980, 4900, 4980, 4870, 4820], type: :area }
  ) %>
  <%= render Midwest::StatComponent.new(
    value: '98.6%',
    label: 'Uptime',
    icon: :pulse,
    color: :blue,
    sparkline: { data: [99, 98, 99, 97, 99, 98, 99, 99], color: 'var(--blue-9)' }
  ) %>
<% end %>

With sparkline

Pass sparkline: an array of numbers (or a Hash of { data:, type:, color: }) to embed a compact trend line. Pair with comparison: / comparison_label: to show the prior-period baseline. Sparkline color follows the trend direction by default (green up, red down).

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Stat/with_sparkline

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."