playbook_ui 14.10.0.pre.rc.13 → 14.10.0.pre.rc.14
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +53 -49
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb +29 -36
- data/app/pb_kits/playbook/pb_link/_link.scss +3 -3
- data/dist/chunks/{_typeahead-DCXvj_rm.js → _typeahead-D-DFD48D.js} +1 -1
- data/dist/chunks/{_weekday_stacked-FHf01JZY.js → _weekday_stacked-CraWIVot.js} +1 -1
- data/dist/chunks/{lib-BBLdPbau.js → lib-CuCy3_xO.js} +1 -1
- data/dist/chunks/{pb_form_validation-CbtUE6Nr.js → pb_form_validation-D37k10a0.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +6 -6
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7e4cea86435c121396a3c4c3fcb62b259a18c7fccf93cbd2f0e60b58cf2f0f8a
|
4
|
+
data.tar.gz: c8137ec80bbd56509d6438ac12e70a44290eb0046fc9fa023ec89e21b11a7289
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 1fbac4b36d5261df555acd4826e5ee368aad30cd4d03828d3dff72b7ae4880f562bfb7c1a2d3c20046b9e4b10cfffd7c3a4875c86f47483c25804cc45e1c8a08
|
7
|
+
data.tar.gz: d2b05614499a535f55f33d1421c717bf95096899d3eff693f1f14eebc2ce08165bf3ef1e52d02dd100b4db5320b8a80c2cc472a188734efca2ccce8427f6f5cd
|
@@ -1,66 +1,70 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
|
2
|
+
import ReactDOMServer from 'react-dom/server'
|
3
3
|
import BarGraph from '../_bar_graph'
|
4
|
+
import Icon from '../../pb_icon/_icon'
|
5
|
+
|
6
|
+
const chartData = [
|
7
|
+
{
|
8
|
+
name: 'Role',
|
9
|
+
data: [0, 200, 300, 654, 656],
|
10
|
+
},
|
11
|
+
{
|
12
|
+
name: 'Company',
|
13
|
+
data: [150, 524, 320, 440, 500],
|
14
|
+
},
|
15
|
+
]
|
4
16
|
|
5
|
-
const
|
6
|
-
|
7
|
-
|
8
|
-
}
|
9
|
-
|
10
|
-
|
11
|
-
}
|
12
|
-
name: 'Sales & Distribution',
|
13
|
-
data: [3387, 743, 1344, 434, 440],
|
14
|
-
}, {
|
15
|
-
name: 'Project Development',
|
16
|
-
data: [3227, 878, 999, 780, 1000],
|
17
|
-
}, {
|
18
|
-
name: 'Other',
|
19
|
-
data: [1111, 677, 3245, 500, 200],
|
20
|
-
}]
|
17
|
+
const renderIcon = (iconName, color) => {
|
18
|
+
return ReactDOMServer.renderToStaticMarkup(
|
19
|
+
<Icon
|
20
|
+
color={color}
|
21
|
+
icon={iconName}
|
22
|
+
/>)
|
23
|
+
};
|
21
24
|
|
22
25
|
const barGraphOptions = {
|
23
|
-
|
24
|
-
|
25
|
-
style: {
|
26
|
-
color: "red"
|
27
|
-
}
|
26
|
+
yAxis: {
|
27
|
+
tickInterval: 5,
|
28
28
|
},
|
29
29
|
xAxis: {
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
}
|
49
|
-
|
30
|
+
categories: ['1', '2', '3', '4', '5'],
|
31
|
+
labels: {
|
32
|
+
useHTML: true,
|
33
|
+
formatter: function () {
|
34
|
+
switch (this.value) {
|
35
|
+
case '1':
|
36
|
+
return `${renderIcon('frown', 'error')}`;
|
37
|
+
case '2':
|
38
|
+
return `${renderIcon('frown', 'warning')}`;
|
39
|
+
case '3':
|
40
|
+
return `${renderIcon('frown-open', 'neutral')}`;
|
41
|
+
case '4':
|
42
|
+
return `${renderIcon('smile', 'category_7')}`;
|
43
|
+
case '5':
|
44
|
+
return `${renderIcon('smile-beam', 'success')}`;
|
45
|
+
default:
|
46
|
+
return ''
|
47
|
+
}
|
48
|
+
},
|
49
|
+
style: {
|
50
|
+
fontSize: '1.4em',
|
51
|
+
},
|
52
|
+
y: 42,
|
53
|
+
},
|
54
|
+
},
|
55
|
+
legend: {
|
56
|
+
itemMarginTop: 62,
|
57
|
+
},
|
50
58
|
}
|
51
59
|
|
52
|
-
const BarGraphCustom = (
|
60
|
+
const BarGraphCustom = () => (
|
53
61
|
<div>
|
54
62
|
<BarGraph
|
55
|
-
axisTitle="Number of Employees"
|
56
63
|
chartData={chartData}
|
57
64
|
customOptions={barGraphOptions}
|
58
|
-
id="
|
59
|
-
|
65
|
+
id="happiness-dashboard"
|
66
|
+
legend
|
60
67
|
title="Bar Graph with Custom Overrides"
|
61
|
-
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
62
|
-
yAxisMin={0}
|
63
|
-
{...props}
|
64
68
|
/>
|
65
69
|
</div>
|
66
70
|
)
|
@@ -1,49 +1,42 @@
|
|
1
1
|
<% data = [{
|
2
|
-
|
3
|
-
|
2
|
+
name: 'Role',
|
3
|
+
data: [0, 200, 300, 654, 656],
|
4
4
|
}, {
|
5
|
-
|
6
|
-
|
7
|
-
}, {
|
8
|
-
name: 'Sales & Distribution',
|
9
|
-
data: [3387,743,1344,434,440,]
|
10
|
-
}, {
|
11
|
-
name: 'Project Development',
|
12
|
-
data: [3227,878,999,780,1000]
|
13
|
-
}, {
|
14
|
-
name: 'Other',
|
15
|
-
data: [1111,677,3245,500,200]
|
5
|
+
name: 'Company',
|
6
|
+
data: [150, 524, 320, 440, 500],
|
16
7
|
}] %>
|
17
8
|
|
18
9
|
<% bar_graph_options = {
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
10
|
+
customOptions: {
|
11
|
+
yAxis: {
|
12
|
+
tickInterval: 5,
|
13
|
+
},
|
14
|
+
xAxis: {
|
15
|
+
categories: [
|
16
|
+
raw(pb_rails("icon", props: { icon: "frown", color: "error", size: "2x" })),
|
17
|
+
raw(pb_rails("icon", props: { icon: "frown", color: "warning", size: "2x" })),
|
18
|
+
raw(pb_rails("icon", props: { icon: "frown-open", color: "neutral", size: "2x" })),
|
19
|
+
raw(pb_rails("icon", props: { icon: "smile", color: "category_7", size: "2x" })),
|
20
|
+
raw(pb_rails("icon", props: { icon: "smile-beam", color: "success", size: "2x" }))
|
21
|
+
],
|
22
|
+
labels: {
|
23
|
+
useHTML: true,
|
24
|
+
sytle: {
|
25
|
+
fontSize: '1.4em',
|
25
26
|
},
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
],
|
34
|
-
labels: {
|
35
|
-
useHTML: true,
|
36
|
-
}
|
37
|
-
}
|
38
|
-
}
|
27
|
+
y: 42,
|
28
|
+
},
|
29
|
+
},
|
30
|
+
legend: {
|
31
|
+
itemMarginTop: 62,
|
32
|
+
},
|
33
|
+
}
|
39
34
|
} %>
|
40
35
|
|
41
36
|
<%= pb_rails("bar_graph", props: {
|
42
|
-
axis_title: 'Number of Employees',
|
43
37
|
chart_data: data,
|
44
38
|
id: "bar-default",
|
45
|
-
|
46
|
-
subtitle: 'Subtitle to replace',
|
39
|
+
legend: true,
|
47
40
|
title: 'Bar Graph with Custom Overrides',
|
48
41
|
custom_options: bar_graph_options
|
49
|
-
}) %>
|
42
|
+
}) %>
|
@@ -17,7 +17,7 @@
|
|
17
17
|
outline-offset: 2px;
|
18
18
|
}
|
19
19
|
&:visited {
|
20
|
-
color: $
|
20
|
+
color: darken($primary_action, 10%);
|
21
21
|
}
|
22
22
|
&.dark {
|
23
23
|
@include pb_link($active_dark);
|
@@ -34,7 +34,7 @@
|
|
34
34
|
}
|
35
35
|
|
36
36
|
&:visited {
|
37
|
-
color: $
|
37
|
+
color: darken($primary_action, 10%);
|
38
38
|
}
|
39
39
|
}
|
40
40
|
}
|
@@ -48,7 +48,7 @@
|
|
48
48
|
}
|
49
49
|
|
50
50
|
&:visited {
|
51
|
-
color: $
|
51
|
+
color: darken($primary_action, 10%);
|
52
52
|
}
|
53
53
|
}
|
54
54
|
}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,useRef,createElement,useState,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,j as getAllIcons,z as get,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-
|
1
|
+
import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,useRef,createElement,useState,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,j as getAllIcons,z as get,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-CuCy3_xO.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return Object.assign(Object.assign({},state),{items:action.payload});case"SET_DRAG_DATA":return Object.assign(Object.assign({},state),{dragData:action.payload});case"SET_IS_DRAGGING":return Object.assign(Object.assign({},state),{isDragging:action.payload});case"SET_ACTIVE_CONTAINER":return Object.assign(Object.assign({},state),{activeContainer:action.payload});case"CHANGE_CATEGORY":return Object.assign(Object.assign({},state),{items:state.items.map((item=>item.id===action.payload.itemId?Object.assign(Object.assign({},item),{container:action.payload.container}):item))});case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return Object.assign(Object.assign({},state),{items:newItems})}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver})=>{const[state,dispatch]=useReducer(reducer,initialState);useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state]);return jsx$1(DragContext.Provider,Object.assign({value:contextValue},{children:children}),void 0)};var classnames$1={exports:{}};
|
2
2
|
/*!
|
3
3
|
Copyright (c) 2018 Jed Watson.
|
4
4
|
Licensed under the MIT License (MIT), see
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import{r as requireLazysizes}from"./lazysizes-B7xYodB-.js";import{jsx,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{useEffect,createContext,useContext,useState,useCallback,createElement,forwardRef,useRef,useImperativeHandle,Fragment as Fragment$1,useReducer,useMemo,useLayoutEffect,isValidElement}from"react";import{h as buildAriaProps,i as buildDataProps,j as buildHtmlProps,k as classnames,l as globalProps,m as buildCss,n as Collapsible,o as globalInlineProps,F as Flex,I as Icon,p as FlexItem,q as Body$1,r as Caption,A as Avatar,s as domSafeProps,t as Title,S as SectionSeparator,u as DialogContext,v as Draggable,w as TextInput,_ as __awaiter,x as __generator,y as __spread,z as PropTypes,E as Card,H as noop$3,J as PbReactPopover,K as CircleIconButton,N as Button,O as HighchartsReact,Q as Badge,U as joinPresent,V as titleize,W as IconCircle,X as Image,Y as Checkbox,Z as Radio}from"./_typeahead-
|
1
|
+
import{r as requireLazysizes}from"./lazysizes-B7xYodB-.js";import{jsx,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{useEffect,createContext,useContext,useState,useCallback,createElement,forwardRef,useRef,useImperativeHandle,Fragment as Fragment$1,useReducer,useMemo,useLayoutEffect,isValidElement}from"react";import{h as buildAriaProps,i as buildDataProps,j as buildHtmlProps,k as classnames,l as globalProps,m as buildCss,n as Collapsible,o as globalInlineProps,F as Flex,I as Icon,p as FlexItem,q as Body$1,r as Caption,A as Avatar,s as domSafeProps,t as Title,S as SectionSeparator,u as DialogContext,v as Draggable,w as TextInput,_ as __awaiter,x as __generator,y as __spread,z as PropTypes,E as Card,H as noop$3,J as PbReactPopover,K as CircleIconButton,N as Button,O as HighchartsReact,Q as Badge,U as joinPresent,V as titleize,W as IconCircle,X as Image,Y as Checkbox,Z as Radio}from"./_typeahead-D-DFD48D.js";import{u as useCollapsible,h as PbTable,j as getAllIcons,D as DateTime$1,a as datePickerHelper,k as useDropdown,o as omitBy,l as isEmpty,m as map,p as partial,n as find$1,q as commonjsGlobal,r as getDefaultExportFromCjs,s as highchartsDarkTheme,t as highchartsTheme,v as noop$4,w as colors,i as PbTextarea}from"./lib-CuCy3_xO.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";var ls_attrchange={exports:{}};(function(module){(function(window2,factory){if(!window2){return}var globalInstall=function(){factory(window2.lazySizes);window2.removeEventListener("lazyunveilread",globalInstall,true)};factory=factory.bind(null,window2,window2.document);if(module.exports){factory(requireLazysizes())}else if(window2.lazySizes){globalInstall()}else{window2.addEventListener("lazyunveilread",globalInstall,true)}})(typeof window!="undefined"?window:0,(function(window2,document2,lazySizes){var addObserver=function(){var connect,disconnect,observer,connected;var lsCfg=lazySizes.cfg;var attributes={"data-bgset":1,"data-include":1,"data-poster":1,"data-bg":1,"data-script":1};var regClassTest="(\\s|^)("+lsCfg.loadedClass;var docElem=document2.documentElement;var setClass=function(target){lazySizes.rAF((function(){lazySizes.rC(target,lsCfg.loadedClass);if(lsCfg.unloadedClass){lazySizes.rC(target,lsCfg.unloadedClass)}lazySizes.aC(target,lsCfg.lazyClass);if(target.style.display=="none"||target.parentNode&&target.parentNode.style.display=="none"){setTimeout((function(){lazySizes.loader.unveil(target)}),0)}}))};var onMutation=function(mutations){var i,len,mutation,target;for(i=0,len=mutations.length;i<len;i++){mutation=mutations[i];target=mutation.target;if(!target.getAttribute(mutation.attributeName)){continue}if(target.localName=="source"&&target.parentNode){target=target.parentNode.querySelector("img")}if(target&®ClassTest.test(target.className)){setClass(target)}}};if(lsCfg.unloadedClass){regClassTest+="|"+lsCfg.unloadedClass}regClassTest+="|"+lsCfg.loadingClass+")(\\s|$)";regClassTest=new RegExp(regClassTest);attributes[lsCfg.srcAttr]=1;attributes[lsCfg.srcsetAttr]=1;if(window2.MutationObserver){observer=new MutationObserver(onMutation);connect=function(){if(!connected){connected=true;observer.observe(docElem,{subtree:true,attributes:true,attributeFilter:Object.keys(attributes)})}};disconnect=function(){if(connected){connected=false;observer.disconnect()}}}else{docElem.addEventListener("DOMAttrModified",function(){var runs;var modifications=[];var callMutations=function(){onMutation(modifications);modifications=[];runs=false};return function(e){if(connected&&attributes[e.attrName]&&e.newValue){modifications.push({target:e.target,attributeName:e.attrName});if(!runs){setTimeout(callMutations);runs=true}}}}(),true);connect=function(){connected=true};disconnect=function(){connected=false}}addEventListener("lazybeforeunveil",disconnect,true);addEventListener("lazybeforeunveil",connect);addEventListener("lazybeforesizes",disconnect,true);addEventListener("lazybeforesizes",connect);connect();removeEventListener("lazybeforeunveil",addObserver)};addEventListener("lazybeforeunveil",addObserver)}))})(ls_attrchange);
|
2
2
|
/**
|
3
3
|
* table-core
|
4
4
|
*
|