Skip to content

Commit

Permalink
[nested-grid] Rename pivot to nested-grid, polish demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@kimo-k
kimo-k committed Mar 21, 2024
1 parent 852759a commit 0bfe0cb
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 79 deletions.
12 changes: 6 additions & 6 deletions src/re_com/pivot.cljs → src/re_com/nested_grid.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
(ns re-com.pivot
(ns re-com.nested-grid
(:require
[clojure.string :as str]
[re-com.util :as u :refer [px deref-or-value]]
Expand All @@ -7,8 +7,8 @@
[re-com.box :as box]
[re-com.buttons :as buttons]))

(def pivot-grid-args-desc {})
(def pivot-grid-parts-desc {})
(def nested-grid-args-desc {})
(def nested-grid-parts-desc {})

(defn descendant? [path-a path-b]
(and (not= path-a path-b)
Expand Down Expand Up @@ -152,7 +152,7 @@
hide? dec))
:grid-row-start (count column-path)}}
(theme/apply {:state {} :part ::column-header-wrapper} theme))
[u/part #p column-header props column-header-part]
[u/part column-header props column-header-part]
[resize-button {:on-resize on-resize :path column-path}]]))

;; Usage of :component-did-update
Expand Down Expand Up @@ -260,8 +260,8 @@
"translateY(" (- (deref-or-value scroll-top)) "px)")}}
child]])

(defn grid [& {:keys [column-width]
:or {column-width 60}}]
(defn nested-grid [& {:keys [column-width]
:or {column-width 60}}]
(let [column-state (r/atom {})
row-state (r/atom {})
hover? (r/atom false)
Expand Down
12 changes: 6 additions & 6 deletions src/re_com/theme/default.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
[clojure.string :as str]
[re-com.theme.util :refer [merge-props]]
[re-com.dropdown :as-alias dropdown]
[re-com.pivot :as-alias pivot]
[re-com.nested-grid :as-alias nested-grid]
[re-com.tree-select :as-alias tree-select]))

(def golden-section-50
Expand Down Expand Up @@ -98,7 +98,7 @@
:overflow-y "auto"
:overflow-x "visible"}}

::pivot/column-header-wrapper
::nested-grid/column-header-wrapper
{:style {:position "relative"}})
(merge-props props)))

Expand Down Expand Up @@ -151,15 +151,15 @@
(-> state :enable (= :disabled))
(merge {:background-color (:background-disabled $)}))}

::pivot/header-spacer
::nested-grid/header-spacer
{:style {:border (str sm-1 " solid " border)
:background-color light-neutral}}

::pivot/cell-wrapper
::nested-grid/cell-wrapper
{:style {:font-size sm-6
:background-color "white"}}

::pivot/column-header-wrapper
::nested-grid/column-header-wrapper
{:style {:padding sm-3
:border (str sm-1 " solid " border)
:background-color light-neutral
Expand All @@ -171,7 +171,7 @@
:white-space "nowrap"
:text-overflow "ellipsis"}}

::pivot/row-header-wrapper
::nested-grid/row-header-wrapper
{:style {:padding sm-3
:border (str sm-1 " solid " border)
:background-color light-neutral
Expand Down
4 changes: 2 additions & 2 deletions src/re_demo/core.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
[re-demo.typeahead :as typeahead]
[re-demo.v-table :as v-table]
[re-demo.simple-v-table :as simple-v-table]
[re-demo.pivot :as pivot]
[re-demo.nested-grid :as nested-grid]
[goog.history.EventType :as EventType])
(:import [goog History]))

Expand Down Expand Up @@ -96,7 +96,7 @@
{:id :tables :level :major :label "Tables"}
{:id :simple-v-table :level :minor :label "Simple V-table" :panel simple-v-table/panel}
{:id :v-table :level :minor :label "V-table" :panel v-table/panel}
{:id :pivot :level :minor :label "Pivot Grid" :panel pivot/panel}
{:id :nested-grid :level :minor :label "Nested Grid" :panel nested-grid/panel}

{:id :layers :level :major :label "Layers"}
{:id :modal-panel :level :minor :label "Modal Panel" :panel modal-panel/panel}
Expand Down
148 changes: 83 additions & 65 deletions src/re_demo/pivot.cljs → src/re_demo/nested_grid.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
(ns re-demo.pivot
(ns re-demo.nested-grid
(:require [re-com.core :as rc :refer [at h-box v-box box gap line label p p-span hyperlink-href]]
[reagent.core :as r]
[re-com.pivot :as pivot :refer [pivot-grid-args-desc pivot-grid-parts-desc]]
[re-com.nested-grid :as nested-grid :refer [nested-grid nested-grid-args-desc nested-grid-parts-desc]]
[re-demo.utils :refer [source-reference panel-title title2 title3 args-table parts-table github-hyperlink status-text new-in-version]]))

(def arg-style {:style {:display "inline-block"
Expand Down Expand Up @@ -52,15 +52,15 @@
" Since there is only one level of nesting, " [:code "column-path"]
" contains a single " [:code "column"] " value - for instance, "
[:code "[:red]"] "."]
[:pre "[pivot/grid
[:pre "[nested-grid
:columns [:red :yellow :blue]
:rows [:red :yellow :blue]
:cell (fn color-cell [{:keys [column-path row-path]}]
(mix-colors (last column-path)
(last row-path)))]"]]])

(defn color-demo []
[pivot/grid
[nested-grid
:columns [:red :yellow :blue]
:rows [:red :yellow :blue]
:cell (fn color-cell [{:keys [row-path column-path]}]
Expand All @@ -77,7 +77,7 @@
[p "Calling " [:code "(color-shade-cell {:column-path [:medium :yellow] :row-path [:blue]})"]
"should return a " [:span {:style {:color "green"}} "green"] " hiccup."]

[:pre "[pivot/grid
[:pre "[nested-grid
{:columns [:medium [:red :yellow :blue]
:light [:red :yellow :blue]
:dark [:red :yellow :blue]]
Expand All @@ -100,13 +100,13 @@
:text-shadow "1px 1px 2px black"}}
color]]))

(pivot/header-spec->header-paths
(nested-grid/header-spec->header-paths
[:medium [:red :yellow :blue]
:light [:red :yellow :blue]
:dark [:red :yellow :blue]])

(defn color-shade-demo []
[pivot/grid
[nested-grid
{:columns [:medium [:red :yellow :blue]
:light [:red :yellow :blue]
:dark [:red :yellow :blue]]
Expand All @@ -116,36 +116,47 @@
(def fruit {:dimension "fruit"})

(defn fruit-demo []
[pivot/grid {:columns [{:id :fruit :hide-cells? true}
[{:id :red}
{:id :white}]]
:rows [[:price
[:foreign
[:kilo
:ton]]
[:domestic
[:kilo
:ton]]]]
:cell (fn fruit-cell [{:keys [row-path column-path]}]
(->> (concat column-path row-path)
(map #(header->icon % (header->icon (get % :id))))
(apply str)))}])
[nested-grid {:columns [{:id :fruit :hide-cells? true}
[{:id :red}
{:id :white}]]
:rows [[:price
[:foreign
[:kilo
:ton]]
[:domestic
[:kilo
:ton]]]]
:cell (fn fruit-cell [{:keys [row-path column-path]}]
(->> (concat column-path row-path)
(map #(header->icon % (header->icon (get % :id))))
(apply str)))}])

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

(def add {:operator + :label "Addition"})
(def multiply {:operator * :label "Multiplication"})
(def lookup {:operator (fn [l r] (get-in lookup-table [l r]))
:label "Lookup"})
(def one {:left 1 :label "1"})
(def two {:left 2 :label "2"})
(def three {:right 3 :label "3"})
(def four {:right 4 :label "4"})

(defn notes-column []
[v-box
:children
[[title2 "Notes"]
[status-text "alpha" {:color "red"}]
[new-in-version "v2.20.0"]
[p [:code "pivot-grid"]
"provides a lean "
[:a {:href "https://en.wikipedia.org/wiki/Pivot_table"} "pivot table"]
" abstraction, using "
[p [:code "nested-grid"] " provides a lean abstraction for viewing multidimensional "
"tabular data, using "
[:a {:href "https://www.w3schools.com/css/css_grid.asp"} "css grid"]
" for layout."]
[title3 "Cells are Functions"]
[p "Each cell is a " [:i "function"] " of its grid position."]
[pivot/grid
[nested-grid
:columns [:a :b :c]
:rows [:x :y :z]
:column-width 40
Expand All @@ -154,15 +165,15 @@
:cell (fn [{:keys [column-path row-path]}] (pr-str (concat column-path row-path)))]
[title3 "Headers are Nested"]
[p "You can declare a tree of nested header values. "]
[pivot/grid
[nested-grid
:columns [:a [:a1 :a2] :b [:b1 :b2]]
:rows [:x [:x1 :x2] :y [:y1 :y2]]
:column-header-height 25
:row-header-width 30
:column-width 90
:cell (fn [{:keys [column-path row-path]}]
(pr-str (list column-path row-path)))]
[p [:code ":columns"] " is a tree of " [:code "column"] " values. For instance: "]
[p [:code ":columns"] " is a tree of nested " [:code "column"] " values. For instance: "]
[:pre ":columns [:a [:a1 :a2] :b [:b1 :b2]]
:rows [:x [:x1 :x2] :y [:y1 :y2]]"]
[p "That means each vertical partition you see is defined by a " [:code ":column-path"]
Expand All @@ -175,15 +186,12 @@

[p "Anything can be a " [:code "column"] " value, "
[:i "except"] " a " [:code "list"] " or " [:code "vector"] " (those express nesting)."]
[pivot/grid
:columns [{:operator + :label "Addition"} [{:left 2 :label "2"}
{:left 3 :label "3"}]
{:operator * :label "Multiplication"} [{:left 2 :label "2"}
{:left 3 :label "3"}]
{:operator / :label "Division"} [{:left 2 :label "2"}
{:left 3 :label "3"}]]
:rows [{:right 4 :label "4"}
{:right 5 :label "5"}]

[nested-grid
:columns [add [one two]
multiply [one two]
lookup [one two]]
:rows [three four]
:row-header (comp :label last :row-path)
:column-header (comp :label last :column-path)
:column-header-height 25
Expand All @@ -193,25 +201,35 @@
(let [{:keys [operator left right]} (->> (into row-path column-path)
(apply merge))]
(operator left right)))]
[:pre ":columns [{:operator + :label \"Addition\"} [{:left 2 :label \"2\"}
{:left 3 :label \"3\"}]
{:operator * :label \"Multiplication\"} [{:left 2 :label \"2\"}
{:left 3 :label \"3\"}]
{:operator / :label \"Division\"} [{:left 2 :label \"2\"}
{:left 3 :label \"3\"}]]
:rows [{:right 4 :label \"4\"}
{:right 5 :label \"5\"}]
:column-header (comp :label last :column-path)
:row-header (comp :label last :row-path)
:cell (fn [{:keys [column-path row-path]}]
(let [{:keys [operator left right]} (->> column-path
(into row-path)
(apply merge))]
(operator left right)))"]
[p "The " [:code ":column-header"] " and " [:code ":row-header"] " props "
"work the same way as " [:code ":cell"] "."
" (Except, a " [:code ":column-header"] " only has a " [:code ":column-path"]
" and a " [:code ":row-header"] " only has a " [:code ":row-path"] ")."]]])
[:pre "(def lookup-table [[\"🚓\" \"🛵\" \"🚲\" \"🛻\" \"🚚\"]
[\"🍐\" \"🍎\" \"🍌\" \"🥝\" \"🍇\"]
[\"🐈\" \"🐕\" \"🐟\" \"🐎\" \"🧸\"]])
(def add {:operator + :label \"Addition\"})
(def multiply {:operator * :label \"Multiplication\"})
(def lookup {:operator (fn [l r] (get-in lookup-table [l r]))
:label \"Lookup\"})
(def one {:left 1 :label \"1\"})
(def two {:left 2 :label \"2\"})
(def three {:right 3 :label \" 3 \"})
(def four {:right 4 :label \" 4 \"})
[nested-grid
:columns [add [one two]
multiply [one two]
lookup [one two]]
:rows [three four]
:column-header (comp :label last :column-path)
:row-header (comp :label last :row-path)
:cell (fn [{:keys [column-path row-path]}]
(let [{:keys [operator left right]} (->> column-path
(into row-path)
(apply merge))]
(operator left right)))]"]
[title3 "Header Cells are Functions"]
[p "Just like " [:code ":cell"] ", the " [:code ":column-header"] " and " [:code ":row-header"] " props "
"are functions of paths."]
[p "The difference is, a " [:code ":column-header"] " only has a " [:code ":column-path"]
" and a " [:code ":row-header"] " only has a " [:code ":row-path"] "."]]])

;; core holds a reference to panel, so need one level of indirection to get figwheel updates
(defn panel
Expand All @@ -225,9 +243,9 @@
:size "auto"
:gap "10px"
:children
[[panel-title "[pivot-grid ... ]"
"src/re_com/pivot.cljs"
"src/re_demo/pivot.cljs"]
[[panel-title "[nested-grid ... ]"
"src/re_com/nested-grid.cljs"
"src/re_demo/nested-grid.cljs"]
[h-box
:src (at)
:gap "50px"
Expand All @@ -244,7 +262,7 @@
(case @selected-tab-id
:note [notes-column]
:parameters [args-table
pivot-grid-args-desc
nested-grid-args-desc
{:total-width "550px"
:name-column-width "180px"}])]]
[v-box
Expand All @@ -256,8 +274,8 @@
:size "15px"]
[color-demo]
[source-reference
"for above pivot-grid"
"src/re_demo/pivot.cljs"]
"for above nested-grid"
"src/re_demo/nested-grid.cljs"]
[color-explainer]
[gap
:src (at)
Expand All @@ -269,7 +287,7 @@
:size "15px"]
[color-shade-demo]
[source-reference
"for above pivot-grid"
"src/re_demo/pivot.cljs"]
"for above nested-grid"
"src/re_demo/nested-grid.cljs"]
[color-shade-explainer]]]]]
#_[parts-table "pivot-grid" pivot-grid-parts-desc]]])))
#_[parts-table "nested-grid" nested-grid-grid-parts-desc]]])))

0 comments on commit 0bfe0cb

Please sign in to comment.