Integrate (draft) saucecharts

Makefile

@@ -6,8 +6,8 @@ PACKAGES := node_modules/.packages.build
 BUILD := build.json
 MANIFEST := manifest.json
 
-MODS := $(shell pwd)/node_modules
-NPATH := $(MODS)/.bin
+NODE_MODULES := $(shell pwd)/node_modules
+NPATH := $(NODE_MODULES)/.bin
 TOOLPATH := $(shell pwd)/tools/bin
 SRC := $(shell find src scss pages templates images -type f 2>/dev/null)
 
@@ -18,12 +18,12 @@ SRC := $(shell find src scss pages templates images -type f 2>/dev/null)
 
 $(PACKAGES): package.json
 	npm install
-	$(MAKE) -C $(MODS)/sauce-chartjs
+	$(MAKE) -C $(NODE_MODULES)/sauce-chartjs
 	touch $@
 
 $(BUILD): $(SRC) $(MANIFEST) $(PACKAGES) Makefile .git/index
 	$(MAKE) sass
-	$(MAKE) mods
+	$(MAKE) deps
 	echo '{"git_commit": "$(shell git rev-parse HEAD 2>/dev/null || echo 0)"}' > $@
 
 # Needed when mozilla store QA runs a build in a zip bundle
@@ -33,12 +33,14 @@ sass:
 	$(TOOLPATH)/sassrender
 	cp -a scss/site/fonts css/site/
 
-mods:
-	rm -rf src/common/jscoop src/common/jsfit
-	cp -r $(MODS)/jscoop/src src/common/jscoop
-	cp -r $(MODS)/jsfit/src src/common/jsfit
-	cp $(MODS)/fflate/esm/browser.js src/common/fflate.mjs
-	cp $(MODS)/sauce-chartjs/dist/Chart.pretty.js src/site/chartjs/Chart.js
+deps:
+	rm -rf src/common/jscoop src/common/jsfit src/site/saucecharts css/saucecharts
+	cp -r $(NODE_MODULES)/jscoop/src src/common/jscoop
+	cp -r $(NODE_MODULES)/jsfit/src src/common/jsfit
+	cp -r $(NODE_MODULES)/saucecharts/src src/site/saucecharts
+	cp -r $(NODE_MODULES)/saucecharts/css css/saucecharts
+	cp $(NODE_MODULES)/fflate/esm/browser.js src/common/fflate.mjs
+	cp $(NODE_MODULES)/sauce-chartjs/dist/Chart.pretty.js src/site/chartjs/Chart.js
 
 clean:
 	rm -rf $(PACKAGES) builds css
@@ -93,4 +95,4 @@ lint-watch:
 	$(TOOLPATH)/lintwatch
 
 
-.PHONY: lint sass clean realclean packages manifest build mods
+.PHONY: lint sass clean realclean packages manifest build deps

scss/site/analysis.scss

@@ -7,6 +7,8 @@
 @use 'data_views';
 @use 'sync';
 
+@import '../saucecharts/line.css';
+
 
 html.sauce-enabled {
     transition: opacity 400ms;

src/.gitignore

@@ -1,4 +1,5 @@
 site/chartjs/Chart.js
+site/saucecharts
 common/jscoop
 common/jsfit
 common/fflate.mjs

src/site/analysis.js

@@ -649,15 +649,16 @@ sauce.ns('analysis', ns => {
     }
 
 
-    function initLapsAddon() {
+    async function initLapsAddon() {
+        const sc = await import('./saucecharts/index.mjs');
         document.addEventListener('lap-efforts-table-view-render', ev => {
-            renderEffortsChart();
+            renderEffortsChart(sc);
         });
-        renderEffortsChart();
+        renderEffortsChart(sc);
     }
 
 
-    function renderEffortsChart() {
+    function renderEffortsChart(sc) {
         const $anchor = jQuery('#efforts-table');
         if (!$anchor.length) {
             console.warn("no laps view");
@@ -693,7 +694,8 @@ sauce.ns('analysis', ns => {
                         <input type="radio" value="${x.attr}" ${!i ? 'selected' : ''} name="type"/>
                     </label>`)}
                 </header>
-                <div style="width: 400px;" class="chart-holder"></div>
+                <div style="width: 100%; height: 4em;" class="chart-holder"></div>
+                <div style="width: 100%; height: 4em;" class="saucecharts-holder"></div>
             </div>
         `);
         const $efforts = $anchor.siblings('.sauce-efforts-chart');
@@ -702,6 +704,10 @@ sauce.ns('analysis', ns => {
                 value: x.get(type),
                 width: Math.random() * 100,
             }));
+            const chart = new sc.LineChart({
+                el: $efforts.find('.saucecharts-holder')[0],
+            });
+            chart.setData(data);
             $efforts.find('.chart-holder').sparkline(data, {
                 type: 'bar',
                 barSpacing: 1,