supercharts-bullet_train 0.1.13 → 0.1.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9a706c5a47e8966e1230f664982e9436ba4379d605f690b9b70428061defdbab
-  data.tar.gz: ce0e935206f2a993e8afef5ce1fca277fb64fffca3645f3c2fb369ca49c77836
+  metadata.gz: 56a1d2213a1e73cacd80d1789dfbc7ff1c28ef483b92733dff64c16b1e3bb572
+  data.tar.gz: 9eae7acba85bd87d8b900cd9bc08ef62c5a29f131d4d0e092bebc4cb4d234bfb
 SHA512:
-  metadata.gz: e4c1af953ce02848c22f6b79ebd0c8076ca820fc6e7f219ad2b12854f15e8f490f7474c78072848bab9d52a6066c6a665686b2dd3ea68a9967e2a912db737b57
-  data.tar.gz: 182fbf240fd34503d60ed6415675b93102d6eb1d6b055e38a3b702f689f38642bdcbe169578a6a6bf5a3c854908799db81dd1d36d768974e4c86d58c185b6d2e
+  metadata.gz: 3844ff0121f7c43ad7d44ddaa0b857a96506e76f5ae5063fec994577cca4be734bb3b76b9c8a43d74723316e25fe5bd429000dc53c61077000fb244dac054dd8
+  data.tar.gz: ea02a7ecb02ba9e4a291fb37064ea121c8249203cbea077f83585fe011a730975568b0156ac5b34c49f35f99c6ae3f66c2153892a28d721131ccc2384f07c334

data/README.md

@@ -78,17 +78,19 @@ You're all set.
 
 ## Usage
 
-Let's you already have a ClickThrough model, storing click-throughs from campaigns. For now we'll just say it click_throughs have a `team_id` (in Bullet Train apps, your account is associated with a team).
+Let's say you already have a ClickThrough model, storing click-throughs from campaigns. For now we'll just say it click_throughs have a `team_id` (in Bullet Train apps, your account is associated with a team).
 
-You'd like a chart to appear in your Dashboard, showing how many click-throughs per day (so we'll group by), associated with your Team.
+You'd like a chart to appear in your Dashboard, showing how many click-throughs per day (so we'll group by day), associated with your Team.
 
 ```bash
 bin/super-scaffold supercharts:chart ClickThrough Team
 ```
 
+This will generated some new files and modify some files like inserting a `turbo_frame` in your `team#show` file, modifying your `roles.yml` file, etc. Look over the changes and commit when satisfied.
+
 ### Generate some test data
 
-We'll use a FactoryBot `trait` to randomize the `created_at` property for the test data we'll create.
+We'll use a FactoryBot `trait` to randomize the `created_at` property for the test data we'll create. This is the change I suggest you make to your `factories/click_throughs.rb` file:
 
 ```ruby
 # test/factories/click_throughs.rb
@@ -115,12 +117,122 @@ Visit your app in `localhost:3000` and you should see your new chart.
 
 ## Modifying the chart
 
-Coming soon...
+### The smallest change: switching to a bar chart
+
+Changing to a bar chart is super easy: just change the following line in your `show.html.erb`
+
+From:
+
+```html
+data-superchart-type-value="line"
+```
+
+To:
+
+```html
+data-superchart-type-value="bar"
+```
+
+### Other chart types: new Stimulus controller
+
+Under the hood, the default Superchart is built using a chart.js instance wrapped inside a Stimulus controller.
+
+For the following types of changes, you'll need to create your own Stimulus controller, duplicating the main `superchart_controller.js` found in this repo.
+
+* Changing to a multi-line, stacked area or stacked bar chart
+* Changing to a radial chart, a scattered plot, a box plot or any other chart
+
+### Any other change: it depends
+
+If you just want to make aesthetic changes, you can change the following css variables found at the top of your scaffolded `show.html.erb`. In this case, these are all TailwindCSS classes that set the appropriate custom CSS properties scoped to just that chart.
+
+```html
+[--axis-color:theme('colors.gray.300')] dark:[--axis-color:theme('colors.darkPrimary.500')]
+[--grid-color:theme('colors.gray.100')] dark:[--grid-color:theme('colors.darkPrimary.800')]
+[--line-color:#a86fe7]
+[--point-color:theme('colors.gray.800')] dark:[--point-color:theme('colors.white')]
+[--point-stroke-color:theme('colors.white')] dark:[--point-stroke-color:theme('colors.darkPrimary.700')]
+[--point-stroke-color-hover:theme('colors.gray.100')] dark:[--point-stroke-color-hover:theme('colors.darkPrimary.800')]
+[--bar-fill-color:var(--line-color)]
+[--bar-hover-fill-color:var(--point-color)]
+[--point-radius:4] md:[--point-radius:6]
+[--point-hover-radius:6] md:[--point-hover-radius:10]
+[--point-border-width:3] md:[--point-border-width:4]
+[--point-hover-border-width:2] md:[--point-hover-border-width:3]
+``` 
+
+If you'd like to override some chart.js options, you can do so in the `chartjsOptions` element:
+
+```html
+<!-- This can only include valid JSON, but no functions. This is not code that will be evaluated -->
+<template data-superchart-target="chartjsOptions">
+  {
+    "borderColor": "#000"
+  }
+</template>
+```
+
+Note that to make this work with both light and dark mode, you might as well use a custom CSS property, which Supercharts lets you do (but chart.js does not support by default):
+
+```html
+<!-- cssVar is a special sub-property which Supercharts will properly interpret as the value of the custom CSS property you set it to -->
+<template data-superchart-target="chartjsOptions">
+  {
+    "borderColor": {
+      "cssVar": "--my-custom-accent-color"
+    }
+  }
+</template>
+```
+
+But if the changes you'd like to make is in the list below, you'll need to make your own custom Stimulus controller:
+
+* The chart.js options you'd like to override includes JavaScript code (e.g. callback functions on properties)
+* Including more than one series (multi-line chart, etc)
+* Including annotations
+* Including a custom hover overlay
+* You need to change a chart.js option that's deeply nested (e.g. `scales.x.grid: false`) because it'll override all options in the top option
 
 ## Contributing
-Contribution directions go here.
+
+### Local development
+
+* Create a Bullet Train app
+* Use the instructions above to include the required gems and the npm package
+* Create a `local/` directory into which you'll clone a copy of this repo:
+
+```bash
+mkdir local
+cd local/
+git clone <this REPO URL>
+```
+
+* In your Gemfile, change the gem to use the local path:
+
+```ruby
+gem "supercharts-bullet_train", path: "local/supercharts-bullet_train"
+```
+
+Then do
+
+```bash
+bundle install
+```
+
+* For modifying the JavaScript, Stimulus Controllers, you'll need to install `yalc` and use it to point to your local copy of the npm package:
+
+```bash
+yarn global add yalc
+cd local/supercharts-bullet_train
+yarn build # build the local changes
+yalc push # publish the npm package locally on your own computer
+cd ../../ # go back to the bullet-train project
+yalc link @supercharts/supercharts-bullet-train
+cd local/supercharts-bullet_train
+yarn watch # continually watch for JavaScript changes, re-build the npm package and push to the Bullet Train app
+```
 
 ## License
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+The gem and npm package are available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
 
 [bullet-train]: https://bullettrain.co

data/app/views/account/scaffolding/completely_concrete/tangible_things/tangible_things_chart/show.html.erb

@@ -6,7 +6,7 @@
     [--line-color:#a86fe7]
     [--point-color:theme('colors.gray.800')] dark:[--point-color:theme('colors.white')]
     [--point-stroke-color:theme('colors.white')] dark:[--point-stroke-color:theme('colors.darkPrimary.700')]
-    [--point-stroke-color-hover:theme('colors.gray.100')] dark:[--point-stroke-color-hover:theme('colors.darkPrimary.600')]
+    [--point-stroke-color-hover:theme('colors.gray.100')] dark:[--point-stroke-color-hover:theme('colors.darkPrimary.800')]
     [--bar-fill-color:var(--line-color)]
     [--bar-hover-fill-color:var(--point-color)]
     [--point-radius:4] md:[--point-radius:6]
@@ -20,7 +20,7 @@
     data-supercharts--describable-hide-contextual-description-class="hidden"
   >
     <%= turbo_frame_tag :charts_tangible_things_filters do %>
-      <div class="flex justify-start">
+      <div class="sm:flex justify-start">
         <div class="relative">
           <div data-supercharts--describable-target="overallDescription">
             <h2 class="text-xs uppercase dark:text-white/50">
@@ -50,7 +50,7 @@
             </p>
           </template>
         </div>
-        <div class="ml-auto">
+        <div class="mt-4 sm:mt-0 ml-auto">
           <div
             data-controller="supercharts--filters" data-supercharts--filters-event-name="superchart:update-chart"
           >
@@ -76,7 +76,15 @@
       data-supercharts--filterable-target="chart"
       data-action="update-chart->superchart#updateChart"
     >
-      <canvas data-superchart-target="chartjsCanvas" style="height: var(--chart-height)""></canvas>
+      <canvas data-superchart-target="chartjsCanvas" style="height: var(--chart-height)"">
+        <% if @timespan == "1w" %>
+          Chart of Tangible Things last 7 days
+        <% elsif @timespan == "1m" %>
+          Chart of Tangible Things last 31 days
+        <% elsif @timespan == "ytd" %>
+          Chart of Tangible Things since start of year
+        <% end %>
+      </canvas>
       <template data-superchart-target="csvData" data-supercharts--filterable-target="chartSourceData"></template>
       <template data-superchart-target="chartjsOptions"></template>
     </div>

data/lib/bullet_train/supercharts/version.rb

@@ -1,5 +1,5 @@
 module BulletTrain
   module Supercharts
-    VERSION = "0.1.13"
+    VERSION = "0.1.15"
   end
 end

data/lib/scaffolding/supercharts_chart_transformer.rb

@@ -22,7 +22,7 @@ class Scaffolding::SuperchartsChartTransformer < Scaffolding::SuperchartsTransfo
     # add children to the show page of their parent.
     unless cli_options["skip-parent"] || parent == "None"
       lines_to_add = <<~RUBY
-        <div class="mt-4 [--chart-height:250px] md:[--chart-height:200px]">
+        <div class="mt-4 [--chart-height:150px] md:[--chart-height:200px]">
           <%= turbo_frame_tag :charts_tangible_things, src: polymorphic_path([:account, @creative_concept, :tangible_things, :chart], timespan: "1m") do %>
             <%= render "shared/supercharts/chart_skeleton" do %>
               Tangible Things&hellip;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: supercharts-bullet_train
 version: !ruby/object:Gem::Version
-  version: 0.1.13
+  version: 0.1.15
 platform: ruby
 authors:
 - Pascal Laliberté
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-10-14 00:00:00.000000000 Z
+date: 2022-10-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails