Skip to content

Commit b0528d0

Browse files
punchaganpunchagan
committed
Make it easy to zoom out and see the full history
1 parent d9e07ff commit b0528d0

File tree

4 files changed

+83
-14
lines changed

4 files changed

+83
-14
lines changed

‎frontend/src/App.res‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -229,16 +229,6 @@ module BenchmarkView = {
229229
}
230230
}
231231

232-
let getDefaultDateRange = {
233-
let hourMs = 3600.0 *. 1000.
234-
let dayMs = hourMs *. 24.
235-
() => {
236-
let ts2 = Js.Date.now()
237-
let ts1 = ts2 -. 90. *. dayMs
238-
(Js.Date.fromFloat(ts1), Js.Date.fromFloat(ts2))
239-
}
240-
}
241-
242232
module Welcome = {
243233
@react.component
244234
let make = () => {
@@ -296,7 +286,7 @@ module RepoView = {
296286
ReScriptUrql.Hooks.useQuery(~query=module(GetAllRepos), ())
297287
}
298288

299-
let ((startDate, endDate), setDateRange) = React.useState(getDefaultDateRange)
289+
let ((startDate, endDate), setDateRange) = React.useState(Litepicker.getDefaultDateRange)
300290
let onSelectDateRange = (startDate, endDate) => setDateRange(_ => (startDate, endDate))
301291

302292
let setWorker = worker => {

‎frontend/src/Icon.res‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -517,3 +517,35 @@ let upArrow =
517517
/>
518518
</g>
519519
</svg>
520+
521+
let zoomIn =
522+
<svg
523+
fill="#000000"
524+
width="24px"
525+
height="24px"
526+
viewBox="0 0 256 256"
527+
xmlns="http://www.w3.org/2000/svg">
528+
<g>
529+
<path
530+
d="M120.46 158.29c-30.166 8.65-61.631-8.792-70.281-38.957-8.65-30.165 8.792-61.63 38.957-70.28 30.165-8.65 61.63 8.792 70.28 38.957 4.417 15.403-1.937 38.002-9.347 50.872-.614 1.067 59.212 53.064 59.212 53.064l-17.427 17.63-53.514-56.72s-10.233 3.241-17.88 5.434zM104 144c22.091 0 40-17.909 40-40s-17.909-40-40-40-40 17.909-40 40 17.909 40 40 40z"
531+
/>
532+
<path
533+
d="M111.912 80.047h-15.95v16.037H80v15.992h15.962V128h15.95v-15.924H128V96.084h-16.088z"
534+
/>
535+
</g>
536+
</svg>
537+
538+
let zoomOut =
539+
<svg
540+
fill="#000000"
541+
width="24px"
542+
height="24px"
543+
viewBox="0 0 256 256"
544+
xmlns="http://www.w3.org/2000/svg">
545+
<g>
546+
<path
547+
d="M120.46 158.29c-30.166 8.65-61.631-8.792-70.281-38.957-8.65-30.165 8.792-61.63 38.957-70.28 30.165-8.65 61.63 8.792 70.28 38.957 4.417 15.403-1.937 38.002-9.347 50.872-.614 1.067 59.212 53.064 59.212 53.064l-17.427 17.63-53.514-56.72s-10.233 3.241-17.88 5.434zM104 144c22.091 0 40-17.909 40-40s-17.909-40-40-40-40 17.909-40 40 17.909 40 40 40z"
548+
/>
549+
<path d="M80 96.084v15.992h48V96.084z" />
550+
</g>
551+
</svg>

‎frontend/src/Litepicker.res‎

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,31 @@ type options = {
1010
"onSelect": Js.Null.t<(Js.Date.t, Js.Date.t) => unit>,
1111
}
1212

13-
type t
13+
type t = {setDateRange: (Js.Date.t, Js.Date.t) => unit}
1414

1515
@new @module("litepicker")
1616
external init: options => t = "default"
1717

18+
@module("./litepicker-bindings") external bindPickerMethods: t => unit = "bindPickerMethods"
19+
1820
let containerSx = [Sx.rounded.sm, Sx.border.xs, Sx.border.color(Sx.gray300)]
1921

2022
let elementSx = [Sx.border.none, Sx.text.semibold, Sx.text.sm, Sx.py.lg, Sx.px.xs, Sx.pointer]
2123

24+
let getDefaultDateRange = {
25+
let hourMs = 3600.0 *. 1000.
26+
let dayMs = hourMs *. 24.
27+
() => {
28+
let ts2 = Js.Date.now()
29+
let ts1 = ts2 -. 90. *. dayMs
30+
(Js.Date.fromFloat(ts1), Js.Date.fromFloat(ts2))
31+
}
32+
}
33+
2234
@react.component
2335
let make = (~sx as uSx=[], ~startDate=?, ~endDate=?, ~onSelect=?) => {
36+
let (showFullHistory, setShowFullHistory) = React.useState(() => false)
37+
2438
let onSelect = switch onSelect {
2539
| None => None
2640
| Some(f) =>
@@ -32,6 +46,27 @@ let make = (~sx as uSx=[], ~startDate=?, ~endDate=?, ~onSelect=?) => {
3246
)
3347
}
3448
let elementRef = React.useRef(Js.Nullable.null)
49+
let pickerRef = React.useRef(None)
50+
51+
let setDateRange = (startDate, endDate) => {
52+
switch pickerRef.current {
53+
| None => ()
54+
| Some(picker) => picker.setDateRange(startDate, endDate)
55+
}
56+
}
57+
let changeDateRange = _ => {
58+
if showFullHistory {
59+
// currently showing full history
60+
let (startDate, endDate) = getDefaultDateRange()
61+
setDateRange(startDate, endDate)
62+
} else {
63+
// currently showing short history
64+
let startDate = Js.Date.makeWithYM(~year=2000.0, ~month=0., ())
65+
let endDate = Js.Date.makeWithYM(~year=2100.0, ~month=0., ())
66+
setDateRange(startDate, endDate)
67+
}
68+
setShowFullHistory(_ => !showFullHistory)
69+
}
3570

3671
React.useEffect0(() => {
3772
let options = {
@@ -43,14 +78,23 @@ let make = (~sx as uSx=[], ~startDate=?, ~endDate=?, ~onSelect=?) => {
4378
"singleMode": false,
4479
"onSelect": onSelect |> Js.Null.fromOption,
4580
}
46-
let _self = init(options)
47-
81+
let picker = init(options)
82+
pickerRef.current = Some(picker)
83+
bindPickerMethods(picker)
4884
None
4985
})
5086

5187
let sx = Array.append(uSx, containerSx)
5288
<Row sx alignX=#center alignY=#center>
5389
<Icon svg=Icon.calendar />
5490
<input className={Sx.make(elementSx)} ref={ReactDOM.Ref.domRef(elementRef)} />
91+
<button
92+
title={showFullHistory ? "Show short history" : "Show full history"}
93+
onClick={changeDateRange}>
94+
<Icon
95+
sx=[Sx.unsafe("width", "24px"), Sx.unsafe("height", "24px")]
96+
svg={showFullHistory ? Icon.zoomIn : Icon.zoomOut}
97+
/>
98+
</button>
5599
</Row>
56100
}

‎frontend/src/litepicker-bindings.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export function bindPickerMethods(picker) {
2+
picker.setDateRange = picker.setDateRange.bind(picker);
3+
}

0 commit comments

Comments
 (0)