(:require [reflecti.core :as reflecti])

(reflecti/chart-type "dom-element-id" data options-map)

(reflecti/area "area-chart" data options-map)

[{:key "Series 1", :values [[1 0] [2 7] [3 14] [4 16] [5 19] [6 23] [7 28]]} 
 {:key "Series 2", :values [[1 0] [2 7] [3 14] [4 16] [5 19] [6 23] [7 28]]} 
 ...
 {:key "Series N", :values [[1 0] [2 7] [3 14] [4 16] [5 19] [6 23] [7 28]]}]

(reflecti/bullet "bullet-chart" data options-map)

{:title "Numbers" 
 :subtitle "(per number)"
 :ranges [161 239 305]
 :measures [247]
 :markers [221]}

(reflecti/horizontal-bar "h-bar-chart" data options-map)
(reflecti/vertical-bar "v-bar-chart" data options-map)

[{:key "Series 1", 
  :values [{:label "A", :value 25} {:label "B", :value 2} {:label "C", :value 28} ...]} 
{:key "Series 2", 
 :values [{:label "A", :value 26} {:label "B", :value 18} {:label "C", :value 7} ...]}
 ...
{:key "Series N", 
 :values [{:label "A", :value 16} {:label "B", :value 8} {:label "C", :value 27} ...]}]

(reflecti/line "line-chart" data options-map)

[{:key "Series 1", :values [{:x 1, :y 0} {:x 2, :y 2} {:x 3, :y 17} ...]} 
 {:key "Series 2", :values [{:x 1, :y 0} {:x 2, :y 4} {:x 3, :y 8} ...]}
 ...
 {:key "Series N", :values [{:x 1, :y 0} {:x 2, :y 4} {:x 3, :y 8} ...]}]

{;; map containing custom styles
 :style {:width 200
         :height 200
         :margin {:top 20 :left 20 :right 20 :bottom 20}
         :box-shadow "give it that paper look, please."}}
 ;; palette options for changing chart colours, text colours, and background colour of the chart
 :palette {:text-color "#FFF"
           :alternate-text-color "#303"
           :canvas-color "#303"
           :chart-colors [big list of colours in here]}
 ;; customize the x and y axis
 :x-axis {:label "Time"
          ;; https://github.com/d3/d3-time-format/blob/master/README.md#d3-time-format
          :time-format "some d3 time format"
          ;; https://github.com/d3/d3-axis/blob/master/README.md#axis_tickFormat
          :format "some d3 tick format"}
 :y-axis {:label "Volume"}
 ;; customize the legend
 :legend {:right-align false
          :margin {:top 20 :left 20 :right 20 :bottom 20}}
 ;; http://nvd3-community.github.io/nvd3/examples/documentation.html#tooltip
 :tooltip #(pretend-im-a-tooltip-content-generator-fn)}

(ns reflecti.datasource-example
  (:require [reflecti.datasource :refer [data dispatch-sort
                                         DataSource Sortable]]
            [reagent.core :as r]))
;; data must be held in a reagent atom
;; https://github.com/reagent-project/reagent
(defrecord SomeDataSource [data-ratom]
  DataSource
  (data [this] data-ratom)

  Sortable
  (dispatch-sort [this sort-key direction]
    (reset! data-ratom (your-magic-sorting-fn))))

(defonce data-source (SomeDataSource. (r/atom (cat-pictures-or-whatever)))

(reflecti/table data-source options-map)

(r/atom [{:name "Mittens" :age 10 :whisker-count 23.3}
         {:name "Princess" :age 3 :whisker-count 18}
         ...
         {:name "Fluffy McFluffPants" :age 4 :whisker-count 0}}])

;; style options for the header, also custom display-labels and order

;; if no display-labels are specified, reflecti will turn the keys in 
;; the data-source into a string by removing the dashes/colon, inserting
;; the relevant spaces, and capitalizing what's left.
{:headers {:display-labels {:one "1"
                            :five "55555"
                            :two "22"
                            :four "4444"
                            :three "333"
                            :six "666666"}
           :order [:one
                   :two
                   :three
                   :four
                   :five
                   :six]
           :border-bottom-color "#DFDFDF"}
 ;; style options for the table
 :table {:background-color "#FFF"
         :color "#212121"}
;; style options for the cells
 :cells {:border-bottom-color "#DFDFDF"
         :hover-color "#EDEDED"}}

(reflecti/slider custom-opts)

{;; function that determines what to do when the slider is slid.
 ;; event is what caused the slider to slide (mouse or keyboard)
 ;; value is what the value of the slider is after it's been slid
 :on-slide (fn [event value] (time-travel value))
 ;; style options for the slider
 :theme {:style ;; style for container around slider
         :slider-style ;; style for slider itself
}}

(reflecti/date-time-picker custom-opts)

{;; function determining what to when the From or To time has changed, times are goog.date.DateTime
 ;; cljs-time is recommended https://github.com/andrewmcveigh/cljs-time)
 :on-time-change (fn [from to]
                      (when from
                        (prn "From time: " from))
                      (when to
                        (prn "To time: " to)))
 ;; what format you would like the date-time to be displayed in
 :format "an-awesome-format-of-course"
 ;; style options for the date-time picker
 :theme {:time-picker {:style { ;; style options for floating date-time picker
                              }
                       :icon-bar-style {:icon-style ;; style of the icons
                                        :separator-style ;; style of the separator
                                       }
                       ;; style options for dialog popover
                       :dialog-style {:text-field-style { ;; style for input text fields
                                                        }
                                      :presets-style { ;; style for preset times dropdown
                                                     }
                                      :range-picker-style { ;; style for time and date range pickers
                                                          }}}}}

(reflecti/search-bar custom-opts)

{

 ;; collection of maps, each containing at a minimum a key
 ;; ':display-text' to be used when displaying the suggestion in
 ;; either the search bar or suggestions dropdown.
 :search-suggestions [{:display-text "Suggestion 1"}]

 ;; called with the text present in the search bar every time it
 ;; changes or a search request is made.
 :on-search (fn [search-text] ...)

 ;; function to call when search box's clear button is pressed
 :on-clear (fn [] ...)

 ;; function to call when a suggestion is clicked.
 ;; 'suggestion' is the exact map that was selected as provided in
 ;; 'search-suggestions'.
 :on-suggestion-click (fn [suggestion] ...)

 ;; 'suggestions-pane' is a reagent component that can be provided to
 ;; customize the suggestions dropdown on the search-bar. If no component
 ;; is provided, a default is used.
 :suggestions-pane (fn [{:keys [suggestions on-selection]}] [:div suggestions])

 ;; style options
 :theme themes/light-theme

 }

(reflecti/search-drawer custom-opts)

{:drawer-contents ;; contents of the drawer
 :open-drawer? ;; boolean controlling whether the drawer is open/closed
 ;; function to call when the drawer is requested to be opened/closed
 ;;   opened? is a boolean representing whether the drawer was requested to be opened or closed
 ;;   reason is why the drawer was requested to be opened/closed (click, keyboard, etc.)
 :on-drawer-open (fn [opened? reason] ...)
 :search-suggestions ;; array of maps containing all search suggestions, 
                     ;; key :display-text will be displayed in the drop down
 ;; function to call when the search button is pressed,
 ;; also called whenever a new character is typed into the search input
 ;;   search-text is the current text entered in the search input
 :on-search (fn [search-text] ...)
 ;; function to call when search box's clear button is pressed
 :on-clear (fn [] ...)
 ;; function to call when a suggestion is clicked.
 ;; 'suggestion' is the exact map that was selected as provided in
 ;; 'search-suggestions'.
 :on-suggestion-click (fn [suggestion] ...)
 :drawer-theme ;; style options for the drawer
 :search-theme ;; style options for the search box
 }