Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 1c466ca

Browse files
kimo-kkimo-k
committedMar 22, 2024··
[nested-grid] Polish docs
1 parent 5af0003 commit 1c466ca

File tree

1 file changed

+133
-90
lines changed

1 file changed

+133
-90
lines changed
 

‎src/re_demo/nested_grid.cljs

+133-90
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
(ns re-demo.nested-grid
2-
(:require [re-com.core :as rc :refer [at h-box v-box box gap line label p p-span hyperlink-href]]
3-
[reagent.core :as r]
4-
[re-com.nested-grid :as nested-grid :refer [nested-grid nested-grid-args-desc nested-grid-parts-desc]]
5-
[re-demo.utils :refer [source-reference panel-title title2 title3 args-table parts-table github-hyperlink status-text new-in-version]]))
2+
(:require
3+
[clojure.string :as str]
4+
[re-com.core :as rc :refer [at h-box v-box box gap line label p p-span hyperlink-href]]
5+
[reagent.core :as r]
6+
[re-com.nested-grid :as nested-grid :refer [nested-grid nested-grid-args-desc nested-grid-parts-desc]]
7+
[re-demo.utils :refer [source-reference panel-title title2 title3 args-table parts-table github-hyperlink status-text new-in-version]]))
68

79
(def arg-style {:style {:display "inline-block"
810
:font-weight "bold"
@@ -39,7 +41,7 @@
3941
"darkyellow" "gold"})
4042

4143
(defn mix-colors [color1 color2]
42-
(name (get-in color-mixer [color1 color2])))
44+
(name (get-in color-mixer [(keyword color1) (keyword color2)])))
4345

4446
(mix-colors :red :yellow)
4547

@@ -48,41 +50,42 @@
4850
:children
4951
[[p "Here's a grid with flat columns and rows."
5052
" The " [:code ":cell"] " function closes over some external business logic ("
51-
[:code "mix-colors"] ") to express a string value."
53+
[:code "mix-colors"] ") to express a string."
5254
" Since there is only one level of nesting, " [:code "column-path"]
53-
" contains a single " [:code "column"] " value - for instance, "
55+
" contains a single " [:i "header value"] " - for instance, "
5456
[:code "[:red]"] "."]
5557
[:pre "[nested-grid
56-
:columns [:red :yellow :blue]
57-
:rows [:red :yellow :blue]
58+
:columns [\"red\" \"yellow\" \"blue\"]
59+
:rows [\"red\" \"yellow\" \"blue\"]
5860
:cell (fn color-cell [{:keys [column-path row-path]}]
5961
(mix-colors (last column-path)
6062
(last row-path)))]"]]])
6163

6264
(defn color-demo []
6365
[nested-grid
64-
:columns [:red :yellow :blue]
65-
:rows [:red :yellow :blue]
66+
:columns ["red" "yellow" "blue"]
67+
:rows ["red" "yellow" "blue"]
6668
:cell (fn color-cell [{:keys [row-path column-path]}]
6769
(mix-colors (last row-path)
6870
(last column-path)))])
6971

7072
(defn color-shade-explainer []
7173
[rc/v-box
7274
:children
73-
[[p "Since " [:code ":columns"] " is a vector tree with 2 levels of nesting,"
75+
[[p "Here, " [:code ":columns"] "is a nested " [:i "configuration"] " of " [:i "header values."]]
76+
[p "Since the " [:i "configuration"] " has 2 levels of nesting,"
7477
" each " [:code ":column-path"] " is 2-long. For instance, "
7578
[:code "[:medium :yellow]"] ". "]
7679
[p [:code ":cell"] " returns a hiccup."]
7780
[p "Calling " [:code "(color-shade-cell {:column-path [:medium :yellow] :row-path [:blue]})"]
7881
"should return a " [:span {:style {:color "green"}} "green"] " hiccup."]
7982

8083
[:pre "[nested-grid
81-
{:columns [:medium [:red :yellow :blue]
82-
:light [:red :yellow :blue]
83-
:dark [:red :yellow :blue]]
84-
:rows [:red :yellow :blue]
85-
:cell color-shade-cell}]"]]])
84+
:columns [:medium [:red :yellow :blue]
85+
:light [:red :yellow :blue]
86+
:dark [:red :yellow :blue]]
87+
:rows [:red :yellow :blue]
88+
:cell color-shade-cell]"]]])
8689

8790
(defn color-shade-cell [{:keys [row-path column-path]}]
8891
(let [[row-hue] row-path
@@ -133,7 +136,7 @@
133136

134137
(def lookup-table [["🚓" "🛵" "🚲" "🛻" "🚚"]
135138
["🍐" "🍎" "🍌" "🥝" "🍇"]
136-
["🐈" "🐕" "🐟" "🐎" "🧸"]])
139+
["🐕" "🐎" "🧸" "🐈" "🐟"]])
137140

138141
(def add {:operator + :label "Addition"})
139142
(def multiply {:operator * :label "Multiplication"})
@@ -157,96 +160,91 @@
157160
[title3 "Cells are Functions"]
158161
[p "Each cell is a " [:i "function"] " of its grid position."]
159162
[nested-grid
160-
:columns [:a :b :c]
161-
:rows [:x :y :z]
163+
:columns ["a" "b" "c"]
164+
:rows ["x" "y" "z"]
162165
:column-width 40
163166
:column-header-height 25
164167
:row-header-width 30
165-
:cell (fn [{:keys [column-path row-path]}] (pr-str (concat column-path row-path)))]
168+
:cell (fn [{:keys [column-path row-path]}]
169+
(str "(" (last column-path)
170+
", " (last row-path) ")"))]
166171
[title3 "Headers are Nested"]
167-
[p "You can declare a tree of nested header values. "]
172+
[p "You can declare headers as a nested " [:i "configuration."]]
168173
[nested-grid
169174
:columns [:a [:a1 :a2] :b [:b1 :b2]]
170175
:rows [:x [:x1 :x2] :y [:y1 :y2]]
171176
:column-header-height 25
172177
:row-header-width 30
173178
:column-width 90
174-
:cell (fn [{:keys [column-path row-path]}]
175-
(pr-str (list column-path row-path)))]
176-
[p [:code ":columns"] " is a tree of nested " [:code "column"] " values. For instance: "]
177-
[:pre ":columns [:a [:a1 :a2] :b [:b1 :b2]]
178-
:rows [:x [:x1 :x2] :y [:y1 :y2]]"]
179-
[p "That means each vertical partition you see is defined by a " [:code ":column-path"]
180-
"(not simply a " [:code "column"] "). "
179+
:cell (comp str seq (juxt :column-path :row-path))]
180+
[p "Each vertical partition you see is defined by a " [:code ":column-path"] "."
181181
"For instance, " [:code "[:a :a1]"] " is the first " [:code ":column-path"] "."]
182182
[p "Same goes for rows. For instance, " [:code "[:y :y2]"] " is the last " [:code ":row-path"] "."]
183-
[title3 "Headers can be Richly Declarative"]
184-
185-
[p "A " [:code ":column-path"] " is a vector of " [:code "column"] " values."]
186-
187-
[p "Anything can be a " [:code "column"] " value, "
188-
[:i "except"] " a " [:code "list"] " or " [:code "vector"] " (those express nesting)."]
189-
190-
[nested-grid
191-
:columns [add [one two]
192-
multiply [one two]
193-
lookup [one two]]
194-
:rows [three four]
195-
:row-header (comp :label last :row-path)
196-
:column-header (comp :label last :column-path)
197-
:row-header 20
198-
:column-header-height 25
199-
:row-header-width 100
200-
:parts {:cell-wrapper {:style {:text-align "center"}}}
201-
:cell (fn [{:keys [column-path row-path]}]
202-
(let [{:keys [operator left right]} (->> (into row-path column-path)
203-
(apply merge))]
204-
(operator left right)))]
205-
[:pre "(def lookup-table [[\"🚓\" \"🛵\" \"🚲\" \"🛻\" \"🚚\"]
206-
[\"🍐\" \"🍎\" \"🍌\" \"🥝\" \"🍇\"]
207-
[\"🐈\" \"🐕\" \"🐟\" \"🐎\" \"🧸\"]])
208-
(def add {:operator + :label \"Addition\"})
209-
(def multiply {:operator * :label \"Multiplication\"})
210-
(def lookup {:operator (fn [l r] (get-in lookup-table [l r]))
211-
:label \"Lookup\"})
212-
(def one {:left 1 :label \"1\"})
213-
(def two {:left 2 :label \"2\"})
214-
(def three {:right 3 :label \" 3 \"})
215-
(def four {:right 4 :label \" 4 \"})
216-
217-
[nested-grid
218-
:columns [add [one two]
219-
multiply [one two]
220-
lookup [one two]]
221-
:rows [three four]
222-
:column-header (comp :label last :column-path)
223-
:row-header (comp :label last :row-path)
224-
:cell (fn [{:keys [column-path row-path]}]
225-
(let [{:keys [operator left right]} (->> column-path
226-
(into row-path)
227-
(apply merge))]
228-
(operator left right)))]"]
229-
[title3 "Header Cells are Functions"]
183+
[title3 "Cells are Views of Header Paths"]
184+
[p "Each cell is a function of its location."]
185+
[h-box
186+
:gap "25px"
187+
:children
188+
[[nested-grid
189+
:columns [:a :b :c]
190+
:rows [:x [:x1 :x2]
191+
:y [:y1 :y2]]
192+
:column-width 70
193+
:column-header-height 25
194+
:row-header-width 30
195+
:cell (fn [{:keys [column-path row-path]}]
196+
[:i (str (list column-path row-path))])]
197+
[v-box
198+
:children
199+
[[gap :size "20px"]
200+
[:pre "[nested-grid
201+
:columns [:a :b :c]
202+
:rows [:x [:x1 :x2]
203+
:y [:y1 :y2]]
204+
:cell
205+
(fn [{:keys [column-path row-path]}]
206+
[:i (str (list column-path row-path))])]"]]]]]
207+
[p "Specifically, the " [:code ":cell"] " prop accepts a function "
208+
"of two keyword arguments: " [:code ":column-path"] " and " [:code ":row-path"] "."]
209+
[p "The function counts as a "
210+
[:a {:href "https://github.com/reagent-project/reagent/blob/master/doc/CreatingReagentComponents.md"}
211+
"reagent component"] ", returning either a string or a hiccup."]
212+
[title3 "Header Cells are Views, Too"]
230213
[p "Just like " [:code ":cell"] ", the " [:code ":column-header"] " and " [:code ":row-header"] " props "
231-
"are functions of paths."]
214+
"are functions of their location."]
232215
[p "The difference is, a " [:code ":column-header"] " only has a " [:code ":column-path"]
233216
" and a " [:code ":row-header"] " only has a " [:code ":row-path"] "."]
217+
[title3 "Headers are Richly Declarative"]
218+
[p "A " [:code ":column-path"] " is a vector of " [:i "header values."]]
219+
[p "Anything can be a " [:i "header value"] ", "
220+
[:i "except"] " a " [:code "list"] " or " [:code "vector"] " (those express " [:i "configuration"] ")."]
221+
[p "So far, we've looked at simple " [:i "header values"] ", like " [:code ":a"] " or " [:code "\"blue\""] "."]
222+
[p "Another common use-case is a map, like " [:code "{:id :a :label \"A\" :type :letter}"] "."
223+
"We consider a value like this to be a " [:i "header spec"] "."]
234224
[title3 "Nested-grid + Domain Logic = Pivot Table"]
235-
[:i {:style {:max-width "400px"}} "A pivot table is a table of values which are aggregations of groups of individual values from a more extensive table... within one or more discrete categories. (" [:a {:href "https://en.wikipedia.org/wiki/Pivot_table"} "Wikipedia"] ")"]
225+
[:i {:style {:max-width "400px"}}
226+
"A pivot table is a table of values which are aggregations of groups of individual values from a more extensive table..."
227+
"within one or more discrete categories. (" [:a {:href "https://en.wikipedia.org/wiki/Pivot_table"} "Wikipedia"] ")"]
236228
[:br]
237229
[p "The pivot table is our driving use-case. "
238230
"By separating UI presentation from data presentation, we hope "
239231
[:code "nested-grid"] " makes it simple to build robust and flexible pivot tables."]
240-
[p "In particular, your " [:code ":cell"] " function can close over concepts like " [:i "aggregations, groups, categories, dimensions, measures,"] " etc."]
241-
[p "In the example above, " [:code "lookup-table"] "demonstrates the concept of "
242-
[:i "a more extensive table."]
243-
" Your " [:code ":columns"] " and " [:code ":rows"]
244-
" can declare the necessary domain concepts, and your " [:code ":cell"] " function can dispatch on each concept, "
245-
"accessing various " [:i "aggregations"] " and " [:i "groupings"] " of that table."]
232+
[p "In " [:strong "Demo #3: Header Specifications"] ", " [:code "lookup-table"] "declares "
233+
[:i "\"a more extensive table,\""]
234+
" and the " [:code "lookup"] [:i "column spec"] " declares how to use that table."]
235+
[p
236+
"More generally:" [:br]
237+
[:ul
238+
[:li "Your " [:code ":columns"] " and " [:code ":rows"]
239+
" declare the necessary domain concepts, such as "
240+
[:i "\"aggregations\""] " and " [:i "\"groups.\""]]
241+
[:li "Your " [:code ":cell"] " function dispatches on each concept, "
242+
"deriving these " [:i "\"aggregations\""] " and " [:i "\"groups\""] " from "
243+
[:i "\"a more extensive table.\""]]]]
246244
[p "We also envision building an interactive, configurable pivot table. "
247-
"By changing the value of " [:code ":columns"] " and " [:code ":rows"] ", you can reconfigure the UI presentation, and "
248-
"your data presentation can simply follow along. "
249-
"This can be done either programmatically or via a dedicated user interface."]]])
245+
"By changing " [:code ":columns"] " and " [:code ":rows"] ", you could reconfigure the UI presentation, and "
246+
"your data presentation would simply follow along. "
247+
"This could be done either programmatically or via a dedicated user interface."]]])
250248

251249
;; core holds a reference to panel, so need one level of indirection to get figwheel updates
252250
(defn panel
@@ -285,7 +283,7 @@
285283
[v-box
286284
:src (at)
287285
:children
288-
[[title2 "Demo #1"]
286+
[[title2 "Demo #1: Flat Headers"]
289287
[gap
290288
:src (at)
291289
:size "15px"]
@@ -298,13 +296,58 @@
298296
:src (at)
299297
:size "40px"]
300298
[line :src (at)]
301-
[title2 "Demo #2"]
299+
[title2 "Demo #2: Nested Headers"]
302300
[gap
303301
:src (at)
304302
:size "15px"]
305303
[color-shade-demo]
306304
[source-reference
307305
"for above nested-grid"
308306
"src/re_demo/nested_grid.cljs"]
309-
[color-shade-explainer]]]]]
307+
[color-shade-explainer]
308+
[title2 "Demo #3: Header Specifications"]
309+
[nested-grid
310+
:columns [add [one two]
311+
multiply [one two]
312+
lookup [one two]]
313+
:rows [three four]
314+
:row-header (comp :label last :row-path)
315+
:column-header (comp :label last :column-path)
316+
:row-header 20
317+
:column-header-height 25
318+
:row-header-width 100
319+
:parts {:cell-wrapper {:style {:text-align "center"}}}
320+
:cell (fn [{:keys [column-path row-path]}]
321+
(let [{:keys [operator left right]} (->> (into row-path column-path)
322+
(apply merge))]
323+
(operator left right)))]
324+
[source-reference
325+
"for above nested-grid"
326+
"src/re_demo/nested_grid.cljs"]
327+
[p "Here, we use " [:i "header specs"] " like " [:code "multiply"]
328+
" and " [:code "lookup"] " to build a multi-modal view of the source data."]
329+
[:pre "(def lookup-table [[\"🚓\" \"🛵\" \"🚲\" \"🛻\" \"🚚\"]
330+
[\"🍐\" \"🍎\" \"🍌\" \"🥝\" \"🍇\"]
331+
[\"🐕\" \"🐎\" \"🧸\" \"🐈\" \"🐟\"]])
332+
(def add {:label \"Addition\" :operator +})
333+
(def multiply {:label \"Multiplication\" :operator *})
334+
(def lookup {:label \"Lookup\"
335+
:operator (fn [l r] (get-in lookup-table [l r]))})
336+
(def one {:label \"1\" :left 1})
337+
(def two {:label \"2\" :left 2})
338+
(def three {:label \"3\" :right 3})
339+
(def four {:label \"4\" :right 4})
340+
341+
[nested-grid
342+
:columns [add [one two]
343+
multiply [one two]
344+
lookup [one two]]
345+
:rows [three four]
346+
:column-header (comp :label last :column-path)
347+
:row-header (comp :label last :row-path)
348+
:cell (fn [{:keys [column-path row-path]}]
349+
(let [{:keys [operator left right]} (->> column-path
350+
(into row-path)
351+
(apply merge))]
352+
(operator left right)))]"]]]]]
310353
#_[parts-table "nested-grid" nested-grid-grid-parts-desc]]])))

0 commit comments

Comments
 (0)
Please sign in to comment.