Skip to content

Commit 74d9872

Browse files
ploucplouc
committedDec 26, 2021
feat(captures): improve the script used to generate charts' images & icons
·
v0.88.0v0.76.0
1 parent c3d7609 commit 74d9872

File tree

2 files changed

+244
-567
lines changed

2 files changed

+244
-567
lines changed
 

‎conf/base.yaml

+110-547
Original file line numberDiff line numberDiff line change
@@ -1,548 +1,111 @@
1+
baseUrl: http://localhost:9000
12
capture:
2-
baseUrl: http://localhost:8000
3-
pages:
4-
#########################################################################
5-
#
6-
# CHARTS
7-
# capture illustrations for readme
8-
#
9-
#########################################################################
10-
11-
# - path: /area-bump/
12-
# selector: '#chart'
13-
# output: ./packages/bump/doc/area-bump.png
14-
15-
# - path: /bump/
16-
# selector: '#chart'
17-
# output: ./packages/bump/doc/bump.png
18-
19-
# - path: /swarmplot
20-
# selector: '#chart'
21-
# output: ./packages/swarmplot/doc/swarmplot.png
22-
# - path: /swarmplot/canvas
23-
# selector: '#chart'
24-
# theme: dark
25-
# output: ./packages/swarmplot/doc/swarmplot-canvas.png
26-
27-
# - path: /geomap
28-
# selector: '#chart'
29-
# output: ./packages/geo/doc/geomap.png
30-
# - path: /geomap/canvas
31-
# selector: '#chart'
32-
# output: ./packages/geo/doc/geomap-canvas.png
33-
34-
# - path: /choropleth
35-
# selector: '#chart'
36-
# output: ./packages/geo/doc/choropleth.png
37-
# - path: /choropleth/canvas
38-
# selector: '#chart'
39-
# output: ./packages/geo/doc/choropleth-canvas.png
40-
41-
# - path: /bar
42-
# selector: '#chart'
43-
# output: ./packages/bar/doc/bar.png
44-
# - path: /bar/canvas
45-
# selector: '#chart'
46-
# output: ./packages/bar/doc/bar-canvas.png
47-
48-
# - path: /calendar
49-
# selector: '#chart'
50-
# output: ./packages/calendar/doc/calendar.png
51-
52-
# - path: /chord
53-
# selector: '#chart'
54-
# output: ./packages/chord/doc/chord.png
55-
# - path: /chord/canvas
56-
# selector: '#chart'
57-
# output: ./packages/chord/doc/chord-canvas.png
58-
59-
# - path: /bubble
60-
# selector: '#chart'
61-
# output: ./packages/circle-packing/doc/bubble.png
62-
# - path: /bubble/html
63-
# selector: '#chart'
64-
# output: ./packages/circle-packing/doc/bubble-html.png
65-
# - path: /bubble/canvas
66-
# selector: '#chart'
67-
# output: ./packages/circle-packing/doc/bubble-canvas.png
68-
69-
# - path: /bullet
70-
# selector: '#chart'
71-
# output: ./packages/bullet/doc/bullet.png
72-
73-
# - path: /heatmap
74-
# selector: '#chart'
75-
# output: ./packages/heatmap/doc/heatmap.png
76-
# - path: /heatmap/canvas
77-
# selector: '#chart'
78-
# output: ./packages/heatmap/doc/heatmap-canvas.png
79-
80-
# - path: /line
81-
# selector: '#chart'
82-
# output: ./packages/line/doc/line.png
83-
# - path: /line/canvas
84-
# selector: '#chart'
85-
# theme: dark
86-
# output: ./packages/line/doc/line-canvas.png
87-
88-
# - path: /network/
89-
# selector: '#chart'
90-
# output: ./packages/network/doc/network.png
91-
# - path: /network/canvas/
92-
# selector: '#chart'
93-
# theme: dark
94-
# output: ./packages/network/doc/network-canvas.png
95-
96-
# - path: /parallel-coordinates
97-
# selector: '#chart'
98-
# output: ./packages/parallel-coordinates/doc/parallel-coordinates.png
99-
# - path: /parallel-coordinates/canvas
100-
# selector: '#chart'
101-
# output: ./packages/parallel-coordinates/doc/parallel-coordinates-canvas.png
102-
103-
# - path: /pie
104-
# selector: '#chart'
105-
# output: ./packages/pie/doc/pie.png
106-
107-
# - path: /radar
108-
# selector: '#chart'
109-
# output: ./packages/radar/doc/radar.png
110-
111-
# - path: /radial-bar
112-
# selector: '#chart'
113-
# output: ./packages/radial-bar/doc/radial-bar.png
114-
115-
# - path: /sankey
116-
# selector: '#chart'
117-
# output: ./packages/sankey/doc/sankey.png
118-
119-
# - path: /scatterplot
120-
# selector: '#chart'
121-
# output: ./packages/scatterplot/doc/scatterplot.png
122-
# - path: /scatterplot/canvas
123-
# selector: '#chart'
124-
# output: ./packages/scatterplot/doc/scatterplot-canvas.png
125-
126-
# - path: /stream
127-
# selector: '#chart'
128-
# output: ./packages/stream/doc/stream.png
129-
130-
# - path: /sunburst
131-
# selector: '#chart'
132-
# output: ./packages/sunburst/doc/sunburst.png
133-
134-
# - path: /treemap
135-
# selector: '#chart'
136-
# output: ./packages/treemap/doc/treemap.png
137-
# - path: /treemap/html
138-
# selector: '#chart'
139-
# output: ./packages/treemap/doc/treemap-html.png
140-
# - path: /treemap/canvas
141-
# selector: '#chart'
142-
# output: ./packages/treemap/doc/treemap-canvas.png
143-
144-
# - path: /voronoi
145-
# selector: '#chart'
146-
# output: ./packages/voronoi/doc/voronoi.png
147-
148-
# - path: /waffle
149-
# selector: '#chart'
150-
# output: ./packages/waffle/doc/waffle.png
151-
# - path: /waffle/html
152-
# selector: '#chart'
153-
# output: ./packages/waffle/doc/waffle-html.png
154-
# - path: /waffle/canvas
155-
# selector: '#chart'
156-
# output: ./packages/waffle/doc/waffle-canvas.png
157-
158-
# - path: /funnel
159-
# selector: '#chart'
160-
# output: ./packages/funnel/doc/funnel.png
161-
162-
# - path: /marimekko
163-
# selector: '#chart'
164-
# output: ./packages/marimekko/doc/marimekko.png
165-
166-
#########################################################################
167-
#
168-
# ICONS
169-
# capture charts' icons
170-
#
171-
#########################################################################
172-
173-
# - path: /internal/icons/
174-
# selector: '#funnel-lightNeutral'
175-
# output: ./website/src/assets/icons/funnel-light-neutral.png
176-
# - path: /internal/icons/
177-
# selector: '#funnel-lightColored'
178-
# output: ./website/src/assets/icons/funnel-light-colored.png
179-
# - path: /internal/icons/
180-
# selector: '#funnel-darkNeutral'
181-
# output: ./website/src/assets/icons/funnel-dark-neutral.png
182-
# - path: /internal/icons/
183-
# selector: '#funnel-darkColored'
184-
# output: ./website/src/assets/icons/funnel-dark-colored.png
185-
186-
# - path: /internal/icons/
187-
# selector: '#area-bump-lightNeutral'
188-
# output: ./website/src/assets/icons/area-bump-light-neutral.png
189-
# - path: /internal/icons/
190-
# selector: '#area-bump-lightColored'
191-
# output: ./website/src/assets/icons/area-bump-light-colored.png
192-
# - path: /internal/icons/
193-
# selector: '#area-bump-darkNeutral'
194-
# output: ./website/src/assets/icons/area-bump-dark-neutral.png
195-
# - path: /internal/icons/
196-
# selector: '#area-bump-darkColored'
197-
# output: ./website/src/assets/icons/area-bump-dark-colored.png
198-
199-
# - path: /internal/icons/
200-
# selector: '#bar-lightNeutral'
201-
# output: ./website/src/assets/icons/bar-light-neutral.png
202-
# - path: /internal/icons/
203-
# selector: '#bar-lightColored'
204-
# output: ./website/src/assets/icons/bar-light-colored.png
205-
# - path: /internal/icons/
206-
# selector: '#bar-darkNeutral'
207-
# output: ./website/src/assets/icons/bar-dark-neutral.png
208-
# - path: /internal/icons/
209-
# selector: '#bar-darkColored'
210-
# output: ./website/src/assets/icons/bar-dark-colored.png
211-
212-
# - path: /internal/icons/
213-
# selector: '#bullet-lightNeutral'
214-
# output: ./website/src/assets/icons/bullet-light-neutral.png
215-
# - path: /internal/icons/
216-
# selector: '#bullet-lightColored'
217-
# output: ./website/src/assets/icons/bullet-light-colored.png
218-
# - path: /internal/icons/
219-
# selector: '#bullet-darkNeutral'
220-
# output: ./website/src/assets/icons/bullet-dark-neutral.png
221-
# - path: /internal/icons/
222-
# selector: '#bullet-darkColored'
223-
# output: ./website/src/assets/icons/bullet-dark-colored.png
224-
225-
# - path: /internal/icons/
226-
# selector: '#bump-lightNeutral'
227-
# output: ./website/src/assets/icons/bump-light-neutral.png
228-
# - path: /internal/icons/
229-
# selector: '#bump-lightColored'
230-
# output: ./website/src/assets/icons/bump-light-colored.png
231-
# - path: /internal/icons/
232-
# selector: '#bump-darkNeutral'
233-
# output: ./website/src/assets/icons/bump-dark-neutral.png
234-
# - path: /internal/icons/
235-
# selector: '#bump-darkColored'
236-
# output: ./website/src/assets/icons/bump-dark-colored.png
237-
238-
# - path: /internal/icons/
239-
# selector: '#circle-packing-lightNeutral'
240-
# output: ./website/src/assets/icons/circle-packing-light-neutral.png
241-
# - path: /internal/icons/
242-
# selector: '#circle-packing-lightColored'
243-
# output: ./website/src/assets/icons/circle-packing-light-colored.png
244-
# - path: /internal/icons/
245-
# selector: '#circle-packing-darkNeutral'
246-
# output: ./website/src/assets/icons/circle-packing-dark-neutral.png
247-
# - path: /internal/icons/
248-
# selector: '#circle-packing-darkColored'
249-
# output: ./website/src/assets/icons/circle-packing-dark-colored.png
250-
251-
# - path: /internal/icons/
252-
# selector: '#choropleth-lightNeutral'
253-
# output: ./website/src/assets/icons/choropleth-light-neutral.png
254-
# - path: /internal/icons/
255-
# selector: '#choropleth-lightColored'
256-
# output: ./website/src/assets/icons/choropleth-light-colored.png
257-
# - path: /internal/icons/
258-
# selector: '#choropleth-darkNeutral'
259-
# output: ./website/src/assets/icons/choropleth-dark-neutral.png
260-
# - path: /internal/icons/
261-
# selector: '#choropleth-darkColored'
262-
# output: ./website/src/assets/icons/choropleth-dark-colored.png
263-
264-
# - path: /internal/icons/
265-
# selector: '#heatmap-lightNeutral'
266-
# output: ./website/src/assets/icons/heatmap-light-neutral.png
267-
# - path: /internal/icons/
268-
# selector: '#heatmap-lightColored'
269-
# output: ./website/src/assets/icons/heatmap-light-colored.png
270-
# - path: /internal/icons/
271-
# selector: '#heatmap-darkNeutral'
272-
# output: ./website/src/assets/icons/heatmap-dark-neutral.png
273-
# - path: /internal/icons/
274-
# selector: '#heatmap-darkColored'
275-
# output: ./website/src/assets/icons/heatmap-dark-colored.png
276-
277-
# - path: /internal/icons/
278-
# selector: '#geomap-lightNeutral'
279-
# output: ./website/src/assets/icons/geomap-light-neutral.png
280-
# - path: /internal/icons/
281-
# selector: '#geomap-lightColored'
282-
# output: ./website/src/assets/icons/geomap-light-colored.png
283-
# - path: /internal/icons/
284-
# selector: '#geomap-darkNeutral'
285-
# output: ./website/src/assets/icons/geomap-dark-neutral.png
286-
# - path: /internal/icons/
287-
# selector: '#geomap-darkColored'
288-
# output: ./website/src/assets/icons/geomap-dark-colored.png
289-
290-
# - path: /internal/icons/
291-
# selector: '#line-lightNeutral'
292-
# output: ./website/src/assets/icons/line-light-neutral.png
293-
# - path: /internal/icons/
294-
# selector: '#line-lightColored'
295-
# output: ./website/src/assets/icons/line-light-colored.png
296-
# - path: /internal/icons/
297-
# selector: '#line-darkNeutral'
298-
# output: ./website/src/assets/icons/line-dark-neutral.png
299-
# - path: /internal/icons/
300-
# selector: '#line-darkColored'
301-
# output: ./website/src/assets/icons/line-dark-colored.png
302-
303-
# - path: /internal/icons/
304-
# selector: '#network-lightNeutral'
305-
# output: ./website/src/assets/icons/network-light-neutral.png
306-
# - path: /internal/icons/
307-
# selector: '#network-lightColored'
308-
# output: ./website/src/assets/icons/network-light-colored.png
309-
# - path: /internal/icons/
310-
# selector: '#network-darkNeutral'
311-
# output: ./website/src/assets/icons/network-dark-neutral.png
312-
# - path: /internal/icons/
313-
# selector: '#network-darkColored'
314-
# output: ./website/src/assets/icons/network-dark-colored.png
315-
316-
# - path: /internal/icons/
317-
# selector: '#chord-lightNeutral'
318-
# output: ./website/src/assets/icons/chord-light-neutral.png
319-
# - path: /internal/icons/
320-
# selector: '#chord-lightColored'
321-
# output: ./website/src/assets/icons/chord-light-colored.png
322-
# - path: /internal/icons/
323-
# selector: '#chord-darkNeutral'
324-
# output: ./website/src/assets/icons/chord-dark-neutral.png
325-
# - path: /internal/icons/
326-
# selector: '#chord-darkColored'
327-
# output: ./website/src/assets/icons/chord-dark-colored.png
328-
329-
# - path: /internal/icons/
330-
# selector: '#parallel-coordinates-lightNeutral'
331-
# output: ./website/src/assets/icons/parallel-coordinates-light-neutral.png
332-
# - path: /internal/icons/
333-
# selector: '#parallel-coordinates-lightColored'
334-
# output: ./website/src/assets/icons/parallel-coordinates-light-colored.png
335-
# - path: /internal/icons/
336-
# selector: '#parallel-coordinates-darkNeutral'
337-
# output: ./website/src/assets/icons/parallel-coordinates-dark-neutral.png
338-
# - path: /internal/icons/
339-
# selector: '#parallel-coordinates-darkColored'
340-
# output: ./website/src/assets/icons/parallel-coordinates-dark-colored.png
341-
342-
# - path: /internal/icons/
343-
# selector: '#pie-lightNeutral'
344-
# output: ./website/src/assets/icons/pie-light-neutral.png
345-
# - path: /internal/icons/
346-
# selector: '#pie-lightColored'
347-
# output: ./website/src/assets/icons/pie-light-colored.png
348-
# - path: /internal/icons/
349-
# selector: '#pie-darkNeutral'
350-
# output: ./website/src/assets/icons/pie-dark-neutral.png
351-
# - path: /internal/icons/
352-
# selector: '#pie-darkColored'
353-
# output: ./website/src/assets/icons/pie-dark-colored.png
354-
355-
# - path: /internal/icons/
356-
# selector: '#waffle-lightNeutral'
357-
# output: ./website/src/assets/icons/waffle-light-neutral.png
358-
# - path: /internal/icons/
359-
# selector: '#waffle-lightColored'
360-
# output: ./website/src/assets/icons/waffle-light-colored.png
361-
# - path: /internal/icons/
362-
# selector: '#waffle-darkNeutral'
363-
# output: ./website/src/assets/icons/waffle-dark-neutral.png
364-
# - path: /internal/icons/
365-
# selector: '#waffle-darkColored'
366-
# output: ./website/src/assets/icons/waffle-dark-colored.png
367-
368-
# - path: /internal/icons/
369-
# selector: '#stream-lightNeutral'
370-
# output: ./website/src/assets/icons/stream-light-neutral.png
371-
# - path: /internal/icons/
372-
# selector: '#stream-lightColored'
373-
# output: ./website/src/assets/icons/stream-light-colored.png
374-
# - path: /internal/icons/
375-
# selector: '#stream-darkNeutral'
376-
# output: ./website/src/assets/icons/stream-dark-neutral.png
377-
# - path: /internal/icons/
378-
# selector: '#stream-darkColored'
379-
# output: ./website/src/assets/icons/stream-dark-colored.png
380-
381-
# - path: /internal/icons/
382-
# selector: '#scatterplot-lightNeutral'
383-
# output: ./website/src/assets/icons/scatterplot-light-neutral.png
384-
# - path: /internal/icons/
385-
# selector: '#scatterplot-lightColored'
386-
# output: ./website/src/assets/icons/scatterplot-light-colored.png
387-
# - path: /internal/icons/
388-
# selector: '#scatterplot-darkNeutral'
389-
# output: ./website/src/assets/icons/scatterplot-dark-neutral.png
390-
# - path: /internal/icons/
391-
# selector: '#scatterplot-darkColored'
392-
# output: ./website/src/assets/icons/scatterplot-dark-colored.png
393-
394-
# - path: /internal/icons/
395-
# selector: '#radar-lightNeutral'
396-
# output: ./website/src/assets/icons/radar-light-neutral.png
397-
# - path: /internal/icons/
398-
# selector: '#radar-lightColored'
399-
# output: ./website/src/assets/icons/radar-light-colored.png
400-
# - path: /internal/icons/
401-
# selector: '#radar-darkNeutral'
402-
# output: ./website/src/assets/icons/radar-dark-neutral.png
403-
# - path: /internal/icons/
404-
# selector: '#radar-darkColored'
405-
# output: ./website/src/assets/icons/radar-dark-colored.png
406-
407-
# - path: /internal/icons/
408-
# selector: '#calendar-lightNeutral'
409-
# output: ./website/src/assets/icons/calendar-light-neutral.png
410-
# - path: /internal/icons/
411-
# selector: '#calendar-lightColored'
412-
# output: ./website/src/assets/icons/calendar-light-colored.png
413-
# - path: /internal/icons/
414-
# selector: '#calendar-darkNeutral'
415-
# output: ./website/src/assets/icons/calendar-dark-neutral.png
416-
# - path: /internal/icons/
417-
# selector: '#calendar-darkColored'
418-
# output: ./website/src/assets/icons/calendar-dark-colored.png
419-
420-
# - path: /internal/icons/
421-
# selector: '#data-lightNeutral'
422-
# output: ./website/src/assets/icons/data-light-neutral.png
423-
# - path: /internal/icons/
424-
# selector: '#data-lightColored'
425-
# output: ./website/src/assets/icons/data-light-colored.png
426-
# - path: /internal/icons/
427-
# selector: '#data-darkNeutral'
428-
# output: ./website/src/assets/icons/data-dark-neutral.png
429-
# - path: /internal/icons/
430-
# selector: '#data-darkColored'
431-
# output: ./website/src/assets/icons/data-dark-colored.png
432-
433-
# - path: /internal/icons/
434-
# selector: '#code-lightNeutral'
435-
# output: ./website/src/assets/icons/code-light-neutral.png
436-
# - path: /internal/icons/
437-
# selector: '#code-lightColored'
438-
# output: ./website/src/assets/icons/code-light-colored.png
439-
# - path: /internal/icons/
440-
# selector: '#code-darkNeutral'
441-
# output: ./website/src/assets/icons/code-dark-neutral.png
442-
# - path: /internal/icons/
443-
# selector: '#code-darkColored'
444-
# output: ./website/src/assets/icons/code-dark-colored.png
445-
446-
# - path: /internal/icons/
447-
# selector: '#treemap-lightNeutral'
448-
# output: ./website/src/assets/icons/treemap-light-neutral.png
449-
# - path: /internal/icons/
450-
# selector: '#treemap-lightColored'
451-
# output: ./website/src/assets/icons/treemap-light-colored.png
452-
# - path: /internal/icons/
453-
# selector: '#treemap-darkNeutral'
454-
# output: ./website/src/assets/icons/treemap-dark-neutral.png
455-
# - path: /internal/icons/
456-
# selector: '#treemap-darkColored'
457-
# output: ./website/src/assets/icons/treemap-dark-colored.png
458-
459-
# - path: /internal/icons/
460-
# selector: '#sankey-lightNeutral'
461-
# output: ./website/src/assets/icons/sankey-light-neutral.png
462-
# - path: /internal/icons/
463-
# selector: '#sankey-lightColored'
464-
# output: ./website/src/assets/icons/sankey-light-colored.png
465-
# - path: /internal/icons/
466-
# selector: '#sankey-darkNeutral'
467-
# output: ./website/src/assets/icons/sankey-dark-neutral.png
468-
# - path: /internal/icons/
469-
# selector: '#sankey-darkColored'
470-
# output: ./website/src/assets/icons/sankey-dark-colored.png
471-
472-
# - path: /internal/icons/
473-
# selector: '#voronoi-lightNeutral'
474-
# output: ./website/src/assets/icons/voronoi-light-neutral.png
475-
# - path: /internal/icons/
476-
# selector: '#voronoi-lightColored'
477-
# output: ./website/src/assets/icons/voronoi-light-colored.png
478-
# - path: /internal/icons/
479-
# selector: '#voronoi-darkNeutral'
480-
# output: ./website/src/assets/icons/voronoi-dark-neutral.png
481-
# - path: /internal/icons/
482-
# selector: '#voronoi-darkColored'
483-
# output: ./website/src/assets/icons/voronoi-dark-colored.png
484-
485-
# - path: /internal/icons/
486-
# selector: '#sunburst-lightNeutral'
487-
# output: ./website/src/assets/icons/sunburst-light-neutral.png
488-
# - path: /internal/icons/
489-
# selector: '#sunburst-lightColored'
490-
# output: ./website/src/assets/icons/sunburst-light-colored.png
491-
# - path: /internal/icons/
492-
# selector: '#sunburst-darkNeutral'
493-
# output: ./website/src/assets/icons/sunburst-dark-neutral.png
494-
# - path: /internal/icons/
495-
# selector: '#sunburst-darkColored'
496-
# output: ./website/src/assets/icons/sunburst-dark-colored.png
497-
498-
# - path: /internal/icons/
499-
# selector: '#swarmplot-lightNeutral'
500-
# output: ./website/src/assets/icons/swarmplot-light-neutral.png
501-
# - path: /internal/icons/
502-
# selector: '#swarmplot-lightColored'
503-
# output: ./website/src/assets/icons/swarmplot-light-colored.png
504-
# - path: /internal/icons/
505-
# selector: '#swarmplot-darkNeutral'
506-
# output: ./website/src/assets/icons/swarmplot-dark-neutral.png
507-
# - path: /internal/icons/
508-
# selector: '#swarmplot-darkColored'
509-
# output: ./website/src/assets/icons/swarmplot-dark-colored.png
510-
511-
# - path: /internal/icons/
512-
# selector: '#marimekko-lightNeutral'
513-
# output: ./website/src/assets/icons/marimekko-light-neutral.png
514-
# - path: /internal/icons/
515-
# selector: '#marimekko-lightColored'
516-
# output: ./website/src/assets/icons/marimekko-light-colored.png
517-
# - path: /internal/icons/
518-
# selector: '#marimekko-darkNeutral'
519-
# output: ./website/src/assets/icons/marimekko-dark-neutral.png
520-
# - path: /internal/icons/
521-
# selector: '#marimekko-darkColored'
522-
# output: ./website/src/assets/icons/marimekko-dark-colored.png
523-
524-
# - path: /internal/icons/
525-
# selector: '#time-range-lightNeutral'
526-
# output: ./website/src/assets/icons/time-range-light-neutral.png
527-
# - path: /internal/icons/
528-
# selector: '#time-range-lightColored'
529-
# output: ./website/src/assets/icons/time-range-light-colored.png
530-
# - path: /internal/icons/
531-
# selector: '#time-range-darkNeutral'
532-
# output: ./website/src/assets/icons/time-range-dark-neutral.png
533-
# - path: /internal/icons/
534-
# selector: '#time-range-darkColored'
535-
# output: ./website/src/assets/icons/time-range-dark-colored.png
536-
537-
- path: /internal/icons/
538-
selector: '#radial-bar-lightNeutral'
539-
output: ./website/src/assets/icons/radial-bar-light-neutral.png
540-
- path: /internal/icons/
541-
selector: '#radial-bar-lightColored'
542-
output: ./website/src/assets/icons/radial-bar-light-colored.png
543-
- path: /internal/icons/
544-
selector: '#radial-bar-darkNeutral'
545-
output: ./website/src/assets/icons/radial-bar-dark-neutral.png
546-
- path: /internal/icons/
547-
selector: '#radial-bar-darkColored'
548-
output: ./website/src/assets/icons/radial-bar-dark-colored.png
3+
charts:
4+
- pkg: bump
5+
chart: bump
6+
flavors: [svg]
7+
8+
- pkg: bump
9+
chart: area-bump
10+
flavors: [svg]
11+
12+
- pkg: swarmplot
13+
chart: swarmplot
14+
theme: dark
15+
flavors: [svg, canvas]
16+
17+
- pkg: geo
18+
chart: geomap
19+
flavors: [svg, canvas]
20+
21+
- pkg: geo
22+
chart: choropleth
23+
flavors: [svg, canvas]
24+
25+
- pkg: bar
26+
chart: bar
27+
flavors: [svg, canvas]
28+
29+
- pkg: calendar
30+
chart: calendar
31+
flavors: [svg]
32+
33+
- pkg: chord
34+
chart: chord
35+
flavors: [svg, canvas]
36+
37+
- pkg: circle-packing
38+
chart: circle-packing
39+
flavors: [svg, canvas]
40+
# html is broken for now
41+
# flavors: [svg, html, canvas]
42+
43+
- pkg: bullet
44+
chart: bullet
45+
flavors: [svg]
46+
47+
- pkg: heatmap
48+
chart: heatmap
49+
flavors: [svg, canvas]
50+
51+
- pkg: line
52+
chart: line
53+
theme: dark
54+
flavors: [svg, canvas]
55+
56+
- pkg: network
57+
chart: network
58+
theme: dark
59+
flavors: [svg, canvas]
60+
61+
- pkg: parallel-coordinates
62+
chart: parallel-coordinates
63+
flavors: [svg, canvas]
64+
65+
- pkg: pie
66+
chart: pie
67+
flavors: [svg, canvas]
68+
69+
- pkg: radar
70+
chart: radar
71+
flavors: [svg]
72+
73+
- pkg: radial-bar
74+
chart: radial-bar
75+
flavors: [svg]
76+
77+
- pkg: sankey
78+
chart: sankey
79+
flavors: [svg]
80+
81+
- pkg: scatterplot
82+
chart: scatterplot
83+
flavors: [svg, canvas]
84+
85+
- pkg: stream
86+
chart: stream
87+
flavors: [svg]
88+
89+
- pkg: sunburst
90+
chart: sunburst
91+
flavors: [svg]
92+
93+
- pkg: treemap
94+
chart: treemap
95+
flavors: [svg, html, canvas]
96+
97+
- pkg: voronoi
98+
chart: voronoi
99+
flavors: [svg]
100+
101+
- pkg: waffle
102+
chart: waffle
103+
flavors: [svg, html, canvas]
104+
105+
- pkg: funnel
106+
chart: funnel
107+
flavors: [svg]
108+
109+
- pkg: marimekko
110+
chart: marimekko
111+
flavors: [svg]

‎scripts/capture.js

+134-20
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,98 @@
1+
const Path = require('path')
2+
const fs = require('fs/promises')
13
const puppeteer = require('puppeteer')
24
const chalk = require('chalk')
5+
const _ = require('lodash')
36
const config = require('@ekino/config')
47

5-
const capture = async (page, baseUrl, { path, selector, output, theme }) => {
6-
const url = `${baseUrl}${path}?capture=1`
8+
const DEFAULT_FLAVOR = 'svg'
9+
const CHART_SELECTOR = '#chart'
10+
const VIEWPORT = {
11+
chart: { width: 1400, height: 900 },
12+
icons: { width: 1400, height: 4000 },
13+
}
14+
const ICON_VARIANTS = [
15+
'light-neutral',
16+
'light-colored',
17+
'dark-neutral',
18+
'dark-colored',
19+
]
20+
21+
const projectDir = process.cwd()
22+
const websiteDir = Path.join(projectDir, 'website')
23+
const websiteCapturesDir = Path.join(websiteDir, 'src', 'assets', 'captures')
24+
const websiteIconsDir = Path.join(websiteDir, 'src', 'assets', 'icons')
25+
const getPackageDir = (pkg) => Path.join(projectDir, 'packages', pkg)
26+
const getPackageDocDir = (pkg) => Path.join(getPackageDir(pkg), 'doc')
27+
const getChartFileName = (chart, flavor) => `${chart}${flavor !== DEFAULT_FLAVOR ? `-${flavor}` : ''}.png`
28+
const getChartDocFilePath = (pkg, chart, flavor) => Path.join(
29+
getPackageDocDir(pkg),
30+
getChartFileName(chart, flavor)
31+
)
32+
const getChartWebsiteFilePath = (chart, flavor) => Path.join(
33+
websiteCapturesDir,
34+
getChartFileName(chart, flavor)
35+
)
36+
const getChartUrl = (chart, flavor) => {
37+
const baseUrl = config.get('baseUrl')
38+
39+
const chunks = [baseUrl, chart]
40+
if (flavor !== DEFAULT_FLAVOR) {
41+
chunks.push(flavor)
42+
}
743

8-
console.log(chalk`{yellow Capturing {white ${path}}} {dim (selector: ${selector})}`)
44+
return `${Path.join(...chunks)}/?capture=1`
45+
}
46+
const getChartIconFilePath = (chart, variant) => Path.join(
47+
websiteIconsDir,
48+
`${chart}-${variant}.png`
49+
)
950

10-
if (path.indexOf('/icons') !== -1) {
11-
await page.setViewport({ width: 1400, height: 4000 })
12-
} else {
13-
await page.setViewport({ width: 1400, height: 900 })
14-
}
1551

52+
const captureChart = async (page, { pkg, chart, flavor, theme }) => {
53+
const url = getChartUrl(chart, flavor)
54+
55+
console.log(chalk`{yellow Capturing chart {white ${chart}}} {dim (package: @nivo/${pkg}, flavor: ${flavor}, url: ${url})}`)
56+
57+
await page.setViewport(VIEWPORT.chart)
1658
await page.goto(url)
1759

1860
if (theme !== undefined) {
61+
console.log(chalk`{dim changing theme to: ${theme}}`)
1962
const themeSelector = `#${theme}Theme`
2063
await page.waitFor(themeSelector)
2164
await page.click(themeSelector)
2265
}
2366

24-
await page.waitFor(selector)
25-
const element = await page.$(selector)
67+
await page.waitFor(CHART_SELECTOR)
68+
const element = await page.$(CHART_SELECTOR)
2669
if (element === null) {
27-
throw new Error(`Unable to find element matching selector: '${selector}' (url: ${url})`)
70+
throw new Error(`Unable to find element matching selector: ${CHART_SELECTOR} (url: ${url})`)
2871
}
2972

3073
const clip = await element.boundingBox()
3174

75+
const docFilePath = getChartDocFilePath(pkg, chart, flavor)
76+
const websiteFilePath = getChartWebsiteFilePath(chart, flavor)
77+
78+
// initially saved to the package doc dir
3279
await page.screenshot({
33-
path: output,
80+
path: docFilePath,
3481
clip,
3582
omitBackground: true,
3683
})
3784

38-
console.log(chalk` {green saved to {white ${output}}}`)
85+
// also save a copy in the website, for social images
86+
await fs.copyFile(docFilePath, websiteFilePath)
87+
88+
console.log(chalk`{green saved to {white ${docFilePath}} and {white ${websiteFilePath}}}`)
3989
console.log('')
4090
}
4191

42-
const captureAll = async config => {
43-
console.log(chalk`{yellow Starting capture for ${config.pages.length} page(s)}`)
44-
console.log(chalk` {dim baseUrl: {white ${config.baseUrl}}}`)
92+
const captureCharts = async () => {
93+
const charts = config.get('capture').charts
94+
95+
console.log(chalk`{yellow Starting capture for ${charts.length} chart(s)}`)
4596
console.log('')
4697

4798
try {
@@ -50,13 +101,71 @@ const captureAll = async config => {
50101
})
51102
const page = await browser.newPage()
52103

53-
for (let pageConfig of config.pages) {
54-
await capture(page, config.baseUrl, pageConfig)
104+
for (let chart of charts) {
105+
for (let flavor of chart.flavors) {
106+
await captureChart(page, { ...chart, flavor })
107+
}
108+
}
109+
110+
await browser.close()
111+
112+
console.log(chalk`{green Done!}`)
113+
} catch (error) {
114+
console.log('')
115+
console.error(chalk`{red oops, something went wrong :(}`)
116+
console.error(error)
117+
118+
process.exit(1)
119+
}
120+
}
121+
122+
const captureIcons = async () => {
123+
const charts = config.get('capture').charts
124+
const icons = charts.map(chart => chart.chart)
125+
126+
console.log(chalk`{yellow Starting capture for ${icons.length} chart icon(s)}`)
127+
console.log('')
128+
129+
try {
130+
const browser = await puppeteer.launch({
131+
headless: true
132+
})
133+
const page = await browser.newPage()
134+
await page.setViewport(VIEWPORT.icons)
135+
await page.goto(`${Path.join(
136+
config.get('baseUrl'),
137+
'internal',
138+
'icons'
139+
)}/`)
140+
141+
for (let icon of icons) {
142+
console.log(chalk`{yellow Capturing {white ${icon}} chart icons}`)
143+
for (let variant of ICON_VARIANTS) {
144+
const selector = `#${icon}-${_.camelCase(variant)}`
145+
console.log(chalk`{dim variant: ${variant}, selector: ${selector}}`)
146+
147+
await page.waitFor(selector)
148+
const element = await page.$(selector)
149+
if (element === null) {
150+
throw new Error(`Unable to find element matching selector: ${selector}`)
151+
}
152+
153+
const iconFilePath = getChartIconFilePath(icon, variant)
154+
const clip = await element.boundingBox()
155+
await page.screenshot({
156+
path: iconFilePath,
157+
clip,
158+
omitBackground: true,
159+
})
160+
161+
console.log(chalk`{green saved to {white ${iconFilePath}}}`)
162+
}
163+
console.log('')
55164
}
56165

57166
await browser.close()
58167

59-
console.log(chalk` {green done!}`)
168+
console.log(chalk`{green Done!}`)
60169
} catch (error) {
61170
console.log('')
62171
console.error(chalk`{red oops, something went wrong :(}`)
@@ -66,4 +175,9 @@ const captureAll = async config => {
66175
}
67176
}
68177

69-
captureAll(config.get('capture'))
178+
const captureAll = async () => {
179+
await captureCharts()
180+
await captureIcons()
181+
}
182+
183+
captureAll()

0 commit comments

Comments
 (0)
Please sign in to comment.