check

README.md

@@ -45,15 +45,14 @@ yarn fix
 ```
 
 ### Testing
-
 | Command                       | Description                                                        |
 |-------------------------------|--------------------------------------------------------------------|
 | `yarn workspace test unit`    | Run unit and integration tests. Does not require app to be running |
 | `yarn workspace test watch`   | Run unit and integration tests in watch mode                       |
-| `yarn workspace test ui`      | Open storybook                                                     |
 | `yarn workspace test e2e`     | Run end-to-end acceptance tests. App must be running in dev mode   |
-| `yarn workspace test cypress` | Open cypress for end-to-end acceptance tests                       |
 | `yarn workspace test smoke`   | Run smoke tests. App must be running locally in production mode    |
+| `yarn workspace test cypress` | Open cypress for end-to-end acceptance tests                       |
+| `yarn workspace test ui`      | Open storybook                                                     |
 
 ### CI/CD Workflows
 Add git hooks with `yarn prepare`

app/App.svelte

@@ -3,15 +3,30 @@
 </style>
 
 <script lang="ts">
+    import type Period from "lib/Period";
+    import data from "./api";
     import PeriodSelector from "./PeriodSelector.svelte";
+
+    function fetchData({ detail: period }: CustomEvent<Period>): void {
+        data.fetch(period);
+    }
 </script>
 
 <div class="app">
     <div class="timepicker">
         <h3>Time Period</h3>
-        <PeriodSelector class="period"/>
+        <PeriodSelector on:select={fetchData}/>
     </div>
-    <div class="reports">
-        <div>Reports</div>
+    <div class="charts">
+    {#await $data}
+        <div class="loading">Loading...</div>
+    {:then data}
+        <CashIndexChart data={data.cashIndex}/>
+        <CutoutChart data={data.cutoutIndex}/>
+        <PurchasesChart data={data.purchases}/>
+        <PrimalChart data={data.cutout}/>
+    {:catch error}
+        <div class="loading">{error.message}</div>
+    {/await}
     </div>
 </div>

app/cutout/Cutout.module.css → app/Cutout.css

@@ -5,7 +5,7 @@
     @apply xl:px-10;
 }
 
-.cutout :global(.chart) {
+.cutout .chart {
     @apply px-4;
     @apply md:px-10;
 }
@@ -46,29 +46,29 @@
     @apply text-xs;
 }
 
-.cutout :global(.plot) g:first-child path {
+.cutout .plot g:first-child path {
     @apply stroke-blue-400;
     stroke-width: 4;
 }
 
-.cutout :global(.plot) g:nth-child(2) path {
+.cutout .plot g:nth-child(2) path {
     @apply stroke-blue-400;
     @apply opacity-25;
     stroke-width: 4;
 }
 
-.cutout :global(.plot) g:first-child circle {
+.cutout .plot g:first-child circle {
     @apply fill-blue-400;
 }
 
-.cutout :global(.plot) g:nth-child(2) circle {
+.cutout .plot g:nth-child(2) circle {
     @apply hidden;
 }
 
-.cutout :global(.marker) rect {
+.cutout .marker rect {
     @apply fill-blue-400;
 }
 
-.cutout :global(.marker) text {
+.cutout .marker text {
     @apply fill-white;
 }

app/Cutout.svelte

@@ -0,0 +1,6 @@
+<style lang="postcss">
+    @import "./Cutout.css";
+</style>
+
+<script lang="ts">
+</script>

app/PeriodSelector.svelte.d.ts

@@ -0,0 +1,4 @@
+import ButtonGroup from "ui/ButtonGroup.svelte";
+import type Period from "lib/Period";
+
+export default class extends ButtonGroup<Period> {}

app/api/index.ts

@@ -1,14 +1,15 @@
-import { writable, type Readable } from "svelte/store";
+import { get, writable, derived, type Readable } from "svelte/store";
 import Week from "lib/Week";
 import Result from "lib/Result";
-import type Period from "lib/Period";
+import Period from "lib/Period";
 import type Cutout from "lib/cutout";
 import type Purchase from "lib/purchases";
 import type Slaughter from "lib/slaughter";
 import cutout from "./cutout";
 import slaughter from "./slaughter";
 import purchases from "./purchases";
 import { today } from "./lib";
+import result from "lib/Result";
 
 export interface Resources {
     period: Period;
@@ -18,26 +19,33 @@ export interface Resources {
 }
 
 interface ApiStore extends Readable<Result<Resources>> {
+    period: Period;
     fetch(period: Period): void;
 }
 
-const { subscribe, set } = writable<Result<Resources>>();
+const period = writable<Period>(Period.ThreeMonths);
+const resources = writable<Result<Resources>>();
+
+period.subscribe(function(period) {
+    const { start } = Week.with(period.from(today)).previous;
+
+    resources.set(Result.Loading());
+
+    Promise.all([
+        cutout.query(start, today),
+        slaughter.query(start, today),
+        purchases.query(start, today)
+    ]).then(([cutout, slaughter, purchases]) =>
+        resources.set(Result.Success({ period, cutout, slaughter, purchases }))
+    ).catch(error =>
+        resources.set(Result.Failure(error)));
+});
 
 const store: ApiStore = {
-    subscribe,
-    fetch(period: Period) {
-        const { start } = Week.with(period.from(today)).previous;
-
-        set(Result.Loading());
-
-        Promise.all([
-            cutout.query(start, today),
-            slaughter.query(start, today),
-            purchases.query(start, today)
-        ]).then(([cutout, slaughter, purchases]) =>
-            set(Result.Success({ period, cutout, slaughter, purchases }))
-        ).catch(error =>
-            set(Result.Failure(error)));
+    subscribe: resources.subscribe,
+    fetch: period.set,
+    get period(): Period {
+        return get(period);
     }
 };
 

app/chart/Line.tsx

@@ -4,8 +4,6 @@ import type { Offset } from ".";
 type Props = Partial<Offset>;
 
 const Line = (props: Props): JSXElement =>
-    <line class="marker-line" transform={`translate(${props.left},0)`}
-        y1={props.top}
-        y2={props.bottom} />;
+
 
 export default Line;

app/chart/chart.css

@@ -1,18 +0,0 @@
-svg {
-    @apply w-full;
-    @apply h-full;
-}
-
-.chart {
-    @apply touch-none;
-}
-
-.chart .marker {
-    @apply fill-white;
-    @apply text-xs;
-    @apply font-bold;
-}
-
-.chart .marker-line {
-    @apply stroke-gray-200;
-}

app/cutout/index.tsx

@@ -1,6 +1,6 @@
 import type { JSXElement } from "solid-js";
 import { createEffect, createMemo, createSignal, Index } from "solid-js";
-import styles from "./Cutout.module.css";
+import styles from "../Cutout.module.css";
 import type { CutoutIndex } from "lib/CutoutIndex";
 import type { Data } from "../chart";
 import LineChart from "../chart/LineChart";