How to use @swim/color - 10 common examples
To help you get started, we’ve selected a few @swim/color examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
swimos / transit / ui / main / kpi / Kpi2ViewController.ts View on Github 
updateData(key: Value, value: Value) {
// console.log('updateData: k: ', key, ' v: ', value);
const sliceColors = [Color.parse("#00a6ed"), Color.parse("#7ed321"),
Color.parse("#c200fb"), Color.parse("#50e3c2"),
Color.parse("#57b8ff"), Color.parse("#5aff15"),
Color.parse("#55dde0"), Color.parse("#f7aef8")];
const tween: Transition = Transition.duration(1000);
const id = key.get("id").stringValue() || '';
const index = key.get("index").numberValue() || 0;
const sliceColor = sliceColors[index % 8];
const sliceValue = value.numberValue() || 0;
const pie = this.pieView;
if (sliceValue > 0) {
let slice: SliceView = pie.getChildView(id) as SliceView;
if (slice) {
slice.value(sliceValue, tween);
// slice.label().text(sliceValue.toFixed());
} else {
slice = new SliceView()
.value(sliceValue)
.sliceColor(sliceColor)updateData(key: Value, value: Value) {
// console.log('updateData: k: ', key, ' v: ', value);
const sliceColors = [Color.parse("#00a6ed"), Color.parse("#7ed321"),
Color.parse("#c200fb"), Color.parse("#50e3c2"),
Color.parse("#57b8ff"), Color.parse("#5aff15"),
Color.parse("#55dde0"), Color.parse("#f7aef8")];
const tween: Transition = Transition.duration(1000);
const id = key.get("id").stringValue() || '';
const index = key.get("index").numberValue() || 0;
const sliceColor = sliceColors[index % 8];
const sliceValue = value.numberValue() || 0;
const pie = this.pieView;
if (sliceValue > 0) {
let slice: SliceView = pie.getChildView(id) as SliceView;
if (slice) {
slice.value(sliceValue, tween);
// slice.label().text(sliceValue.toFixed());
} else {updateData(key: Value, value: Value) {
// console.log('updateData: k: ', key, ' v: ', value);
const sliceColors = [Color.parse("#00a6ed"), Color.parse("#7ed321"),
Color.parse("#c200fb"), Color.parse("#50e3c2"),
Color.parse("#57b8ff"), Color.parse("#5aff15"),
Color.parse("#55dde0"), Color.parse("#f7aef8")];
const tween: Transition = Transition.duration(1000);
const id = key.get("id").stringValue() || '';
const index = key.get("index").numberValue() || 0;
const sliceColor = sliceColors[index % 8];
const sliceValue = value.numberValue() || 0;
const pie = this.pieView;
if (sliceValue > 0) {
let slice: SliceView = pie.getChildView(id) as SliceView;
if (slice) {
slice.value(sliceValue, tween);
// slice.label().text(sliceValue.toFixed());
} else {
slice = new SliceView()// chart container
const accelChartContainer = chartsContainer.append("div");
accelChartContainer.className('chartContainer');
// speed chart
const accelChartCanvas = accelChartContainer.append("canvas").height(200);
const accelerationChart = new ChartView()
.bottomAxis("time")
.leftAxis("linear")
.bottomGesture(false)
.leftDomainPadding([0.1, 0.1])
.topGutter(0)
.rightGutter(0)
.bottomGutter(0)
.leftGutter(-1)
.domainColor(Color.transparent(0))
.tickMarkColor(Color.transparent(0));
accelChartCanvas.append(accelerationChart);
this._accelerationPlot = new LineGraphView()
.stroke(colorAgency)
.strokeWidth(1);
accelerationChart.addPlot(this._accelerationPlot);
// headerRow.append("span").key("routeTitle").text(vehicle.routeTitle);
//console.info('vehicle', vehicle);
// TODO: layout popover
}let _this: ColorOrStringAttributeAnimator = function (value?: AnyColor | string | null, tween?: Tween): Color | string | null | undefined | V {
if (value === void 0) {
return _this.value;
} else {
if (value !== null) {
if (typeof value === "string") {
try {
value = Color.parse(value);
} catch (swallow) {
// string value
}
} else {
value = Color.fromAny(value);
}
}
_this.setState(value, tween);
return _this._view;
}
} as ColorOrStringAttributeAnimator;
(_this as any).__proto__ = this;let _this: ColorOrStringStyleAnimator = function (value?: AnyColor | string | null, tween?: Tween, priority?: string | null): Color | string | null | undefined | V {
if (value === void 0) {
return _this.value;
} else {
if (value !== null) {
if (typeof value === "string") {
try {
value = Color.parse(value);
} catch (swallow) {
// string value
}
} else {
value = Color.fromAny(value);
}
}
_this.setState(value, tween, priority);
return _this._view;
}
} as ColorOrStringStyleAnimator;
(_this as any).__proto__ = this;const speedChartContainer = chartsContainer.append("div");
speedChartContainer.className('chartContainer');
// speed chart
const speedChartCanvas = speedChartContainer.append("canvas").height(200);
this._speedChart = new ChartView()
.bottomAxis("time")
.leftAxis("linear")
.bottomGesture(false)
.leftDomainPadding([0.1, 0.1])
.topGutter(0)
.rightGutter(0)
.bottomGutter(0)
.leftGutter(-1)
.domainColor(Color.transparent(0))
.tickMarkColor(Color.transparent(0));
speedChartCanvas.append(this._speedChart);
this._speedPlot = new LineGraphView()
.stroke(colorAgency)
.strokeWidth(1);
this._speedChart.addPlot(this._speedPlot);
// acceleration chart title
const accelChartTitle = chartsContainer.append("h3").text("Acceleration");
accelChartTitle.className("chartTitle");
// chart container
const accelChartContainer = chartsContainer.append("div");
accelChartContainer.className('chartContainer');get primaryColor(): Color {
return Color.parse("#d90c25");
}didSetView(view: PopoverView): void {
view.width(240)
.height(360)
.display('flex')
.flexDirection('column')
.borderRadius(5)
.padding(10)
.backgroundColor(Color.parse("#071013").alpha(0.9))
.backdropFilter("blur(2px)")
.color("#ffffff");
const intersection = this._info;
const header = view.append("header")
.display('flex')
.alignItems('center');
header.append("div")
.borderRadius(20)
.backgroundColor('#00a6ed')
.padding([3,6,3,6])
.marginRight(5)
.fontSize(15)
.color("#000000")
.text(`${intersection.id}`);get: function (this: ColorOrStringAttributeAnimator): Color | string | null | undefined {
let value = this._value;
if (value === void 0) {
const attributeValue = this.attributeValue;
if (attributeValue) {
try {
value = Color.parse(attributeValue);
} catch (swallow) {
value = attributeValue;
}
}
}
return value;
},
enumerable: true,@swim/color
RGB and HSL color types with color-space-aware operators, conversions, and parsers
