Public
Edited
Apr 16, 2023
stylesheet = html`<style>
[class$="tabList"] {
border-bottom: 3px solid #a5f;
}
[class*="tabItem"] {
background-color: #111;
font-weight: 600;
}
[class*="tabItem"]:hover {
font-weight: 1000;
text-decoration-line: none
}
[class*="tabItem"]:hover > a:link {
text-decoration: none
}
[class*="tabItem--active"] {
background-color: #a5f;
font-weight: 800;
}
// [class|="controlPanel"][class*="container"] > input {
// flex-grow: 10;
// width: none
// }
// [class|="controlPanel"][class*="container"] > input + span {
// width: auto
// }
</style>`
viewof tabGui = wrapGUI(
State(
{
tabs: State.Tabs({
modifiers: State.Section(
{
width: State.Slider(1, {
min: 0.2,
max: 1,
step: 0.1,
label: "Width Multiplier"
}),
height: State.Slider(1, {
min: 0.6,
max: 4,
step: 0.1,
label: "Height Multiplier"
})
},
{ label: "Sizing" }
),
recency: State.Section(
{
enabled: State.Checkbox(true, { label: "Enable" })
},
{ label: "Recently Added Indicators" }
)
})
},
{ label: "Chart Modifications" }
)
)
function wrapGUI(state, options) {
const root = document.createElement("div");
const gui = GUI(
state,
Object.assign(
{
root: root,
containerCSS: "max-width:600px",
theme: Object.assign({}, (options || {}).theme, {
fontFamily: "'Helvetica', sans-serif",
fontSize: "12px",
fontColor: "black",
controlBgColor: "white",
controlBorderRadius: "0px",
controlBorderColor: "#aaa",
fieldBgColor: "white",
fieldHoverColor: "#f8f8f8",
fieldActiveColor: "#ddd",
fieldBorderColor: "#ccc",
fieldHeight: 30,
sectionHeadingColor: "white",
sectionHeadingBgColor: "#ffffff",
sectionHeadingHoverColor: "#005F87",
sectionHeadingBorderColor: "#ffffff",
sectionHeadingHeight: 30,
visibilityFontColor: "#fff",
sliderThumbColor: "#005F87",
focusBorderColor: "#888"
})
},
options || {}
)
).$field.onChanges((e) => root.dispatchEvent(new CustomEvent("input")));
root.value = state;
return root;
}
GUI = require("https://unpkg.com/controls-gui@1.2.1/dist/controls-gui.min.js")
State = require("https://unpkg.com/controls-state@1.1.1/dist/controls-state.min.js")
import { css } from "@j-f1/css-template-tag"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
