Merge pull request #43 from microsoft/feat/esm
Upgrade to essex-scripts 20 with ESM support
This commit is contained in:
Коммит
562a894d35
|
@ -0,0 +1,8 @@
|
|||
releases:
|
||||
"@thematic/color": patch
|
||||
"@thematic/core": patch
|
||||
"@thematic/d3": patch
|
||||
"@thematic/fluent": patch
|
||||
"@thematic/react": patch
|
||||
"@thematic/vega": patch
|
||||
"@thematic/webapp": patch
|
|
@ -1,11 +0,0 @@
|
|||
/*!
|
||||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
module.exports = {
|
||||
presets: [
|
||||
['@babel/preset-env', { targets: { node: 'current' } }],
|
||||
'@babel/preset-typescript',
|
||||
['@babel/preset-react', { runtime: 'automatic' }],
|
||||
],
|
||||
}
|
40
package.json
40
package.json
|
@ -5,19 +5,18 @@
|
|||
"scripts": {
|
||||
"preinstall": "npx only-allow yarn",
|
||||
"postinstall": "husky install",
|
||||
"clean:": "yarn workspaces foreach -pv run clean",
|
||||
"bundle:": "yarn workspaces foreach -pv run bundle",
|
||||
"build:": "yarn workspaces foreach -piv run build",
|
||||
"start:": "yarn workspaces foreach -piv run start",
|
||||
"publish:": "yarn workspaces foreach --exclude '@thematic/root' -pv npm publish --tolerate-republish --access public",
|
||||
"version:": "yarn workspaces foreach --exclude '@thematic/root' -iv version -d",
|
||||
"lint:": "essex lint --fix --strict",
|
||||
"clean": "yarn workspaces foreach -pv run clean",
|
||||
"bundle": "yarn workspaces foreach -pv run bundle",
|
||||
"build": "yarn workspaces foreach -pivt run build",
|
||||
"start": "yarn workspaces foreach -piv run start",
|
||||
"publish": "yarn workspaces foreach --exclude '@thematic/root' -pv npm publish --tolerate-republish --access public",
|
||||
"version": "yarn workspaces foreach --exclude '@thematic/root' -iv version -d",
|
||||
"lint": "essex lint --fix --strict",
|
||||
"prettify:": "essex prettify",
|
||||
"test:": "jest",
|
||||
"test:ci": "jest --coverage",
|
||||
"jest_coverage": "jest --coverage",
|
||||
"git-is-clean": "essex git-is-clean",
|
||||
"ci": "run-s lint: build: bundle: test:ci git-is-clean",
|
||||
"release": "run-s clean: build: publish:"
|
||||
"ci": "run-s lint build bundle jest_coverage git-is-clean",
|
||||
"release": "run-s clean build publish"
|
||||
},
|
||||
"workspaces": {
|
||||
"packages": [
|
||||
|
@ -25,31 +24,26 @@
|
|||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.16.0",
|
||||
"@babel/preset-env": "^7.16.4",
|
||||
"@babel/preset-react": "^7.16.0",
|
||||
"@babel/preset-typescript": "^7.16.0",
|
||||
"@essex/eslint-config": "^19.0.1",
|
||||
"@essex/eslint-plugin": "^19.0.1",
|
||||
"@essex/jest-config": "^19.0.1",
|
||||
"@essex/eslint-config": "^20.0.0",
|
||||
"@essex/eslint-plugin": "^20.0.0",
|
||||
"@essex/jest-config": "^20.0.0",
|
||||
"@essex/prettier-config": "^18.0.2",
|
||||
"@essex/scripts": "^19.0.5",
|
||||
"@essex/scripts": "^20.0.1",
|
||||
"@types/eslint": "^8",
|
||||
"@types/jest": "^26.0.24",
|
||||
"@types/node": "^14.18.5",
|
||||
"@types/prettier": "^2.4.2",
|
||||
"@typescript-eslint/eslint-plugin": "^5.9.0",
|
||||
"@typescript-eslint/parser": "^5.9.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.11.0",
|
||||
"@typescript-eslint/parser": "^5.11.0",
|
||||
"eslint": "^8.6.0",
|
||||
"eslint-import-resolver-node": "^0.3.6",
|
||||
"husky": "^6.0.0",
|
||||
"jest": "^27.4.7",
|
||||
"jest": "^27.5.1",
|
||||
"lint-staged": "^11.2.6",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"regenerator-runtime": "^0.13.9",
|
||||
"ts-jest": "^27.1.2",
|
||||
"typescript": "^4.5.5"
|
||||
},
|
||||
"prettier": "@essex/prettier-config"
|
||||
|
|
|
@ -2,11 +2,12 @@
|
|||
"name": "@thematic/color",
|
||||
"version": "1.3.3",
|
||||
"license": "MIT",
|
||||
"main": "src/index.ts",
|
||||
"publishConfig": {
|
||||
"main": "dist/cjs/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"types": "dist/types/index.d.ts"
|
||||
"main": "dist/cjs/index.js",
|
||||
"types": "dist/types/index.d.ts",
|
||||
"exports": {
|
||||
"import": "./dist/esm/index.mjs",
|
||||
"require": "./dist/cjs/index.js",
|
||||
"types": "./dist/types/index.d.ts"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
@ -24,7 +25,8 @@
|
|||
"hsluv": "^0.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@essex/scripts": "^19.0.5",
|
||||
"@essex/scripts": "^20.0.1",
|
||||
"@essex/tsconfig-base": "^1.0.1",
|
||||
"@types/chroma-js": "^2.1.3",
|
||||
"@types/node": "^14.18.5"
|
||||
},
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { css2rgbaVector, css2rgbaNumber, css2css, css2hex } from './chroma'
|
||||
import { css2rgbaVector, css2rgbaNumber, css2css, css2hex } from './chroma.js'
|
||||
|
||||
/**
|
||||
* This class represents an instance of a color.
|
||||
|
|
|
@ -3,9 +3,12 @@
|
|||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
|
||||
import chroma, { contrast as chromaContrast } from 'chroma-js'
|
||||
import { hexToHsluv, hsluvToHex } from 'hsluv'
|
||||
import { Rgb, Rgba, Hsv, Hsl } from './interfaces'
|
||||
import chroma from 'chroma-js'
|
||||
import hsluv from 'hsluv'
|
||||
import type { Rgb, Rgba, Hsv, Hsl } from './interfaces.js'
|
||||
|
||||
const { contrast: chromaContrast } = chroma
|
||||
const { hexToHsluv, hsluvToHex } = hsluv
|
||||
|
||||
/**
|
||||
* This is a variety of color utilities to minimize additional direct dependencies
|
||||
|
@ -76,7 +79,7 @@ export function contrast(foreground: string, background: string): number {
|
|||
* @param css
|
||||
* @param alpha Included for compatibility with all of the other transformers, but it will be omitted from the returned value.
|
||||
*/
|
||||
export function css2rgb(css: string, alpha?: number): Rgb {
|
||||
export function css2rgb(css: string, _alpha?: number): Rgb {
|
||||
if (css === 'none') {
|
||||
return {
|
||||
r: 0,
|
||||
|
@ -121,7 +124,7 @@ export function css2rgba(css: string, alpha?: number): Rgba {
|
|||
* @param css
|
||||
* @param alpha
|
||||
*/
|
||||
export function css2hsv(css: string, alpha?: number): Hsv {
|
||||
export function css2hsv(css: string, _alpha?: number): Hsv {
|
||||
if (css === 'none') {
|
||||
return {
|
||||
h: 0,
|
||||
|
@ -142,7 +145,7 @@ export function css2hsv(css: string, alpha?: number): Hsv {
|
|||
* @param css
|
||||
* @param alpha
|
||||
*/
|
||||
export function css2hsl(css: string, alpha?: number): Hsl {
|
||||
export function css2hsl(css: string, _alpha?: number): Hsl {
|
||||
if (css === 'none') {
|
||||
return {
|
||||
h: 0,
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
||||
// @ts-ignore
|
||||
import cb from 'color-blind'
|
||||
import { ColorBlindnessMode, ColorBlindnessMeta, Scheme } from './interfaces'
|
||||
import { ColorBlindnessMode, ColorBlindnessMeta, Scheme } from './interfaces.js'
|
||||
|
||||
const noop = (color: string) => color
|
||||
|
||||
|
@ -19,7 +19,10 @@ export function colorBlindness(
|
|||
mode?: ColorBlindnessMode,
|
||||
): Scheme {
|
||||
const m = mode || ColorBlindnessMode.None
|
||||
const fnName = ColorBlindnessMode[m].toLowerCase()
|
||||
const fnName = ColorBlindnessMode[m]?.toLowerCase()
|
||||
if (!fnName) {
|
||||
throw new Error(`could not find ColorBlindnessMode ${mode}`)
|
||||
}
|
||||
const fn = cb[fnName] || noop
|
||||
return Object.entries(scheme).reduce((acc, cur) => {
|
||||
const [key, value] = cur
|
||||
|
@ -77,6 +80,9 @@ const cbMeta: CBMetaMap = {
|
|||
export function colorBlindnessInfo(
|
||||
mode: ColorBlindnessMode,
|
||||
): ColorBlindnessMeta {
|
||||
const key = ColorBlindnessMode[mode]
|
||||
return cbMeta[key]
|
||||
const key = ColorBlindnessMode[mode] as string
|
||||
if (!key) {
|
||||
throw new Error(`could not find ColorBlindnessMode ${mode}`)
|
||||
}
|
||||
return cbMeta[key] as ColorBlindnessMeta
|
||||
}
|
||||
|
|
|
@ -2,11 +2,11 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
export * from './interfaces'
|
||||
export * from './chroma'
|
||||
export * from './colorBlindness'
|
||||
export * from './Color'
|
||||
export * from './scheme'
|
||||
export * from './interfaces.js'
|
||||
export * from './chroma.js'
|
||||
export * from './colorBlindness.js'
|
||||
export * from './Color.js'
|
||||
export * from './scheme.js'
|
||||
|
||||
// TODO: best would be to update the scheme compute to accept undefined or baseline params and handle an "empty" case, which is maybe grayscale
|
||||
export const defaultParams = {
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
/*!
|
||||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
export { getScheme } from './scheme/getScheme.js'
|
||||
export * from './scheme/getNamedSchemeColor.js'
|
||||
export * from './scheme/isNominal.js'
|
|
@ -2,9 +2,12 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { hex as chromaHex } from 'chroma-js'
|
||||
import { hsluvToHex } from 'hsluv'
|
||||
import { Params, Scheme } from '../interfaces'
|
||||
import chroma from 'chroma-js'
|
||||
import hsluv from 'hsluv'
|
||||
import type { Params, Scheme } from '../interfaces'
|
||||
|
||||
const { hex: chromaHex } = chroma
|
||||
const { hsluvToHex } = hsluv
|
||||
|
||||
const lightTextLuminance = 95
|
||||
const darkTextLuminance = 20
|
||||
|
@ -68,13 +71,17 @@ export function polynomial_hsl_scale(
|
|||
const luminances = polynomial_scale(exp, sl, el, size)
|
||||
const hexvalues: HSLVector[] = []
|
||||
for (let i = 0; i < size; i++) {
|
||||
hexvalues.push([hues[i], saturations[i], luminances[i]])
|
||||
hexvalues.push([
|
||||
hues[i] as number,
|
||||
saturations[i] as number,
|
||||
luminances[i] as number,
|
||||
])
|
||||
}
|
||||
return hexvalues
|
||||
}
|
||||
|
||||
// Based on a maximum hue shift of 100 (from the slider)
|
||||
function getOffsetHue([h, s, l]: HSLVector, hueShift: number) {
|
||||
function getOffsetHue([h]: HSLVector, hueShift: number) {
|
||||
if (hueShift >= 25 && hueShift <= 75) {
|
||||
// analogous range
|
||||
const delta = (analogousRange * (hueShift - 50)) / 25
|
||||
|
@ -95,7 +102,7 @@ function getBackgroundSaturationaAndLuminance(
|
|||
backgroundLevel: number,
|
||||
light: boolean,
|
||||
): [number, number] {
|
||||
function normalizeSaturation(h: number, l: number) {
|
||||
function normalizeSaturation(_h: number, l: number) {
|
||||
let satGivingMaxChroma = 100
|
||||
let c = chromaHex(hsluvToHex([hue, 100, l])).hcl()[1]
|
||||
while (c > maxBackgroundChroma && satGivingMaxChroma >= 0) {
|
||||
|
@ -172,11 +179,11 @@ export class ColorMaker {
|
|||
|
||||
const boldGreyLuminance = this.light ? darkestGrey : lightestGrey
|
||||
const greys = this.explicitGrey(5, mutedGreyLuminance, boldGreyLuminance)
|
||||
this.lowContrastAnnotationHsl = greys[0]
|
||||
this.lowMidContrastAnnotationHsl = greys[1]
|
||||
this.midContrastAnnotationHsl = greys[2]
|
||||
this.midHighContrastAnnotationHsl = greys[3]
|
||||
this.highContrastAnnotationHsl = greys[4]
|
||||
this.lowContrastAnnotationHsl = greys[0] as HSLVector
|
||||
this.lowMidContrastAnnotationHsl = greys[1] as HSLVector
|
||||
this.midContrastAnnotationHsl = greys[2] as HSLVector
|
||||
this.midHighContrastAnnotationHsl = greys[3] as HSLVector
|
||||
this.highContrastAnnotationHsl = greys[4] as HSLVector
|
||||
// halfway to the background from the darkest/lightest
|
||||
const faintLuminance = this.light
|
||||
? (100 - lightestGrey) / 2 + lightestGrey
|
||||
|
@ -194,12 +201,8 @@ export class ColorMaker {
|
|||
!this.cachedNominalSequence ||
|
||||
this.cachedNominalSequence.size !== size
|
||||
) {
|
||||
const {
|
||||
nominalBold,
|
||||
nominal,
|
||||
nominalMuted,
|
||||
nominalHues,
|
||||
} = this.getNominalHueSequences(size)
|
||||
const { nominalBold, nominal, nominalMuted, nominalHues } =
|
||||
this.getNominalHueSequences(size)
|
||||
this.cachedNominalSequence = {
|
||||
bold: nominalBold,
|
||||
std: nominal,
|
||||
|
@ -232,7 +235,7 @@ export class ColorMaker {
|
|||
} {
|
||||
const { hues: nominalHues } = this.nominal(size)
|
||||
|
||||
const accentHue = nominalHues[offset % nominalHues.length]
|
||||
const accentHue = nominalHues[offset % nominalHues.length] as number
|
||||
|
||||
const colorLuminance = this.accentHsl[2]
|
||||
const greyLuminance = this.greyLuminance
|
||||
|
@ -272,10 +275,8 @@ export class ColorMaker {
|
|||
}
|
||||
|
||||
public sequentialComplement(size: number, offset = 0): HSLVector[] {
|
||||
const {
|
||||
greyAccent,
|
||||
maxSaturationComplement,
|
||||
} = this.getAccentsAndComplements(size, offset)
|
||||
const { greyAccent, maxSaturationComplement } =
|
||||
this.getAccentsAndComplements(size, offset)
|
||||
return polynomial_hsl_scale(
|
||||
linearExponent,
|
||||
greyAccent,
|
||||
|
|
|
@ -3,8 +3,8 @@
|
|||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
|
||||
import { Color } from '../Color'
|
||||
import { Scheme } from '../interfaces'
|
||||
import { Color } from '../Color.js'
|
||||
import type { Scheme } from '../interfaces.js'
|
||||
|
||||
/**
|
||||
* Extracts a thematic Color using its scheme "path".
|
||||
|
@ -17,7 +17,11 @@ export function getNamedSchemeColor(scheme: Scheme, path?: string): Color {
|
|||
}
|
||||
const indexed = indexedTest(path)
|
||||
if (indexed) {
|
||||
return new Color(scheme[indexed.name as keyof Scheme][indexed.index])
|
||||
const selectedScheme = scheme[indexed.name as keyof Scheme] as
|
||||
| string
|
||||
| string[]
|
||||
const css = selectedScheme[indexed.index as number] as string
|
||||
return new Color(css)
|
||||
}
|
||||
return new Color(scheme[path as keyof Scheme] as string)
|
||||
}
|
||||
|
@ -28,7 +32,7 @@ function indexedTest(path: string) {
|
|||
if (indexedName && indexedIndex) {
|
||||
return {
|
||||
name: indexedName[1],
|
||||
index: +indexedIndex[1],
|
||||
index: +indexedIndex![1]!,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,4 +2,4 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
export * from './HsluvColorLogic'
|
||||
export * from './HsluvColorLogic.js'
|
||||
|
|
|
@ -1,7 +0,0 @@
|
|||
/*!
|
||||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
export { getScheme } from './getScheme'
|
||||
export * from './getNamedSchemeColor'
|
||||
export * from './isNominal'
|
|
@ -1,9 +1,7 @@
|
|||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"extends": "@essex/tsconfig-base",
|
||||
"compilerOptions": {
|
||||
"outDir": "lib",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"types": ["node"]
|
||||
"outDir": "lib"
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
|
|
|
@ -2,11 +2,12 @@
|
|||
"name": "@thematic/core",
|
||||
"version": "1.3.3",
|
||||
"license": "MIT",
|
||||
"main": "src/index.ts",
|
||||
"publishConfig": {
|
||||
"main": "dist/cjs/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"types": "dist/types/index.d.ts"
|
||||
"main": "dist/cjs/index.js",
|
||||
"types": "dist/types/index.d.ts",
|
||||
"exports": {
|
||||
"import": "./dist/esm/index.mjs",
|
||||
"require": "./dist/cjs/index.js",
|
||||
"types": "./dist/types/index.d.ts"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
@ -29,7 +30,8 @@
|
|||
"murmurhash-js": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@essex/scripts": "^19.0.5",
|
||||
"@essex/scripts": "^20.0.1",
|
||||
"@essex/tsconfig-base": "^1.0.1",
|
||||
"@types/d3-scale": "^2.2.6",
|
||||
"@types/jest": "^26.0.24",
|
||||
"@types/lodash": "^4.14.178",
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { Params, Scheme, ColorBlindnessMode } from '@thematic/color'
|
||||
import { merge } from 'lodash'
|
||||
import merge from 'lodash/merge.js'
|
||||
import {
|
||||
nominal,
|
||||
continuous,
|
||||
|
@ -27,13 +27,13 @@ import {
|
|||
AxisTitleImpl,
|
||||
AxisTickLabelsImpl,
|
||||
RuleImpl,
|
||||
} from './impls'
|
||||
} from './impls/index.js'
|
||||
import {
|
||||
applyParams,
|
||||
applyScheme,
|
||||
computeDefinition,
|
||||
createScheme,
|
||||
} from './scheme'
|
||||
} from './scheme.js'
|
||||
import {
|
||||
Theme as ITheme,
|
||||
ThemeSpec,
|
||||
|
@ -65,7 +65,7 @@ import {
|
|||
Rule,
|
||||
Transformer,
|
||||
ExportConfig,
|
||||
} from './types'
|
||||
} from './types/index.js'
|
||||
|
||||
const defaultConfig = {
|
||||
variant: ThemeVariant.Light,
|
||||
|
@ -309,6 +309,10 @@ export class Theme implements ITheme {
|
|||
size,
|
||||
)
|
||||
}
|
||||
return this._schemeCache[size]
|
||||
const result = this._schemeCache[size]
|
||||
if (!result) {
|
||||
throw new Error(`could not locate schema with size ${size}`)
|
||||
}
|
||||
return result
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { css2rgba } from '@thematic/color'
|
||||
import { Theme, Transformer } from '../types'
|
||||
import type { Theme, Transformer } from '../types/index.js'
|
||||
|
||||
/**
|
||||
* Creates a text string of the scheme colors compatible with GIMP/Inkscape palette files (*.gpl)
|
||||
|
|
|
@ -2,6 +2,6 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
export * from './gimp'
|
||||
export * from './powerbi'
|
||||
export * from './office'
|
||||
export * from './gimp.js'
|
||||
export * from './powerbi.js'
|
||||
export * from './office.js'
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { Theme, ThemeVariant, Transformer } from '../types'
|
||||
import { Theme, ThemeVariant, Transformer } from '../types/index.js'
|
||||
|
||||
export type OfficeTheme = {
|
||||
dark1: string
|
||||
|
@ -43,13 +43,13 @@ export const office: Transformer<OfficeTheme> = (theme: Theme) => {
|
|||
theme.variant === ThemeVariant.Dark
|
||||
? theme.application().accent().hex()
|
||||
: theme.plotArea().fill().hex(),
|
||||
accent1: nominal[0],
|
||||
accent2: nominal[1],
|
||||
accent3: nominal[2],
|
||||
accent4: nominal[3],
|
||||
accent5: nominal[4],
|
||||
accent6: nominal[5],
|
||||
accent1: nominal[0] as string,
|
||||
accent2: nominal[1] as string,
|
||||
accent3: nominal[2] as string,
|
||||
accent4: nominal[3] as string,
|
||||
accent5: nominal[4] as string,
|
||||
accent6: nominal[5] as string,
|
||||
hyperlink: theme.application().accent().hex(),
|
||||
followedHyperlink: nominal[0],
|
||||
followedHyperlink: nominal[0] as string,
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,9 +2,9 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { Theme, Transformer } from '../types'
|
||||
import type { Theme, Transformer } from '../types/index.js'
|
||||
|
||||
export type PowerBITheme = {
|
||||
export interface PowerBITheme {
|
||||
name: string
|
||||
dataColors: string[]
|
||||
background: string
|
||||
|
@ -19,7 +19,7 @@ export type PowerBITheme = {
|
|||
export const powerbi: Transformer<PowerBITheme> = (theme: Theme) => {
|
||||
// TODO: this is the very most basic theme properties available. we could do much more with semantic mappings, akin to the Fluent themes
|
||||
const nominal = theme.scales().nominal(12)
|
||||
const dataColors = new Array(12).fill(1).map((a, i) => nominal(i).hex())
|
||||
const dataColors = new Array(12).fill(1).map((_a, i) => nominal(i).hex())
|
||||
const application = theme.application()
|
||||
const pbi: PowerBITheme = {
|
||||
name: `${theme.name} - ${theme.variant}`,
|
||||
|
|
|
@ -4,12 +4,12 @@
|
|||
*/
|
||||
import { Color } from '@thematic/color'
|
||||
import murmur from 'murmurhash-js'
|
||||
import { linear, log, quantile } from '../scales'
|
||||
import { linear, log, quantile } from '../scales.js'
|
||||
import {
|
||||
ScaleType,
|
||||
NominalColorScaleFunction,
|
||||
ContinuousColorScaleFunction,
|
||||
} from '../types'
|
||||
} from '../types/index.js'
|
||||
|
||||
/**
|
||||
* Nominal (categorical) scale generator.
|
||||
|
@ -51,7 +51,7 @@ export function nominal(
|
|||
|
||||
fn.toArray = function (length?: number) {
|
||||
const l = length ? length : domain ? domain.length : colors.length
|
||||
return new Array(l).fill(1).map((a, i) => {
|
||||
return new Array(l).fill(1).map((_a, i) => {
|
||||
return fn(i).hex()
|
||||
})
|
||||
}
|
||||
|
@ -87,14 +87,15 @@ export function continuous(
|
|||
const index = Math.floor(scale(value) * max)
|
||||
// make sure the index is in bounds for safe clamping
|
||||
const i = index < 0 ? 0 : index > max ? max : index
|
||||
const color = colorStops[i]
|
||||
const color = colorStops[i] as string
|
||||
return new Color(color)
|
||||
}
|
||||
|
||||
fn.toArray = function (length?: number) {
|
||||
const l = length || colorStops.length
|
||||
const step = (domain[domain.length - 1] - domain[0]) / l
|
||||
return new Array(l).fill(1).map((a, i) => {
|
||||
const step =
|
||||
((domain[domain.length - 1] as number) - (domain[0] as number)) / l
|
||||
return new Array(l).fill(1).map((_a, i) => {
|
||||
return fn(step * i).hex()
|
||||
})
|
||||
}
|
||||
|
|
|
@ -3,11 +3,16 @@
|
|||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { Color } from '@thematic/color'
|
||||
import { Application, Chart, ApplicationSpec, ChartSpec } from '../types'
|
||||
import type {
|
||||
Application,
|
||||
Chart,
|
||||
ApplicationSpec,
|
||||
ChartSpec,
|
||||
} from '../types/index.js'
|
||||
|
||||
export * from './colorScales'
|
||||
export * from './svg-marks'
|
||||
export * from './svg-chrome'
|
||||
export * from './colorScales.js'
|
||||
export * from './svg-marks.js'
|
||||
export * from './svg-chrome.js'
|
||||
|
||||
export function ApplicationImpl(application: ApplicationSpec): Application {
|
||||
return {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { Color } from '@thematic/color'
|
||||
import {
|
||||
import type {
|
||||
SVGChrome,
|
||||
ChromeText,
|
||||
PlotArea,
|
||||
|
@ -22,7 +22,7 @@ import {
|
|||
AxisTitleSpec,
|
||||
AxisTickLabelsSpec,
|
||||
TooltipSpec,
|
||||
} from '../types'
|
||||
} from '../types/index.js'
|
||||
|
||||
function SVGChromeImpl(spec: SVGSpec): SVGChrome {
|
||||
return {
|
||||
|
|
|
@ -30,7 +30,7 @@ import {
|
|||
SelectionState,
|
||||
Rule,
|
||||
RuleSpec,
|
||||
} from '../types'
|
||||
} from '../types/index.js'
|
||||
|
||||
const identity = (datum: any) => datum
|
||||
|
||||
|
@ -78,7 +78,7 @@ function getMarkValue(
|
|||
}
|
||||
if (scaleBindings && scaleBindings[property]) {
|
||||
const { scale, accessor = generalAccessor || identity } =
|
||||
scaleBindings[property]
|
||||
scaleBindings[property]!
|
||||
const value = accessor(datum)
|
||||
return scale(value)
|
||||
}
|
||||
|
|
|
@ -2,8 +2,8 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
export * from './types'
|
||||
export * from './loader'
|
||||
export * from './extensions'
|
||||
export * from './scales'
|
||||
export { Theme as ThemeImpl } from './Theme'
|
||||
export * from './types/index.js'
|
||||
export * from './loader.js'
|
||||
export * from './extensions/index.js'
|
||||
export * from './scales.js'
|
||||
export { Theme as ThemeImpl } from './Theme.js'
|
||||
|
|
|
@ -3,12 +3,17 @@
|
|||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { hsluv2hex } from '@thematic/color'
|
||||
import { Theme as ThemeImpl } from './Theme'
|
||||
import autumn from './themes/autumn.json'
|
||||
import defaultTheme from './themes/default.json'
|
||||
import metal from './themes/metal.json'
|
||||
import ocean from './themes/ocean.json'
|
||||
import { Theme, ThemeListing, ThemeConfig, ThemeSpec } from './types'
|
||||
import { Theme as ThemeImpl } from './Theme.js'
|
||||
import autumn from './themes/autumn.js'
|
||||
import defaultTheme from './themes/default.js'
|
||||
import metal from './themes/metal.js'
|
||||
import ocean from './themes/ocean.js'
|
||||
import type {
|
||||
Theme,
|
||||
ThemeListing,
|
||||
ThemeConfig,
|
||||
ThemeSpec,
|
||||
} from './types/index.js'
|
||||
|
||||
const themes = {
|
||||
default: defaultTheme,
|
||||
|
|
|
@ -84,8 +84,8 @@ function quantizeHistogram(data: number[], bins: number, smoothing?: boolean) {
|
|||
const newEnd = smoothing && moveBackward ? end - backward : end + forward
|
||||
const bin: Bin = values.slice(start, newEnd)
|
||||
if (bin.length > 0) {
|
||||
bin.x0 = bin[0]
|
||||
bin.x1 = bin[bin.length - 1]
|
||||
bin.x0 = bin[0] as number
|
||||
bin.x1 = bin[bin.length - 1] as number
|
||||
binStructure.push(bin)
|
||||
}
|
||||
|
||||
|
|
|
@ -10,9 +10,15 @@ import {
|
|||
ColorBlindnessMode,
|
||||
colorBlindness,
|
||||
} from '@thematic/color'
|
||||
import { merge, set } from 'lodash'
|
||||
import defaults from './themes/defaults.json'
|
||||
import { ThemeDefinition, ThemeSpec, ThemeVariant, SVGSpec } from './types'
|
||||
import merge from 'lodash/merge.js'
|
||||
import set from 'lodash/set.js'
|
||||
import defaults from './themes/defaults.js'
|
||||
import {
|
||||
ThemeDefinition,
|
||||
ThemeSpec,
|
||||
ThemeVariant,
|
||||
SVGSpec,
|
||||
} from './types/index.js'
|
||||
|
||||
// these are static default settings for the marks that are not derived from the computed scheme
|
||||
const DEFAULT_NOMINAL_ITEMS = 10
|
||||
|
@ -129,7 +135,7 @@ export function computeDefinition(
|
|||
paths: ['application.error'],
|
||||
},
|
||||
{
|
||||
value: scheme.nominal[0],
|
||||
value: scheme.nominal[0] as string,
|
||||
paths: [
|
||||
'rect.fill',
|
||||
'area.fill',
|
||||
|
@ -200,7 +206,7 @@ export function computeDefinition(
|
|||
|
||||
const signalConfigs: Config[] = [
|
||||
{
|
||||
value: scheme.nominalBold[0],
|
||||
value: scheme.nominalBold[0] as string,
|
||||
paths: [
|
||||
'rect.hovered.fill',
|
||||
'area.hovered.fill',
|
||||
|
@ -217,7 +223,7 @@ export function computeDefinition(
|
|||
],
|
||||
},
|
||||
{
|
||||
value: scheme.nominalMuted[0],
|
||||
value: scheme.nominalMuted[0] as string,
|
||||
paths: [
|
||||
'rect.suppressed.fill',
|
||||
'area.suppressed.fill',
|
||||
|
|
|
@ -1,11 +0,0 @@
|
|||
{
|
||||
"name": "Autumn",
|
||||
"params": {
|
||||
"accentHue": 50,
|
||||
"accentSaturation": 86,
|
||||
"accentLuminance": 67,
|
||||
"backgroundLevel": 95,
|
||||
"backgroundHueShift": 50,
|
||||
"nominalHueStep": 10
|
||||
}
|
||||
}
|
|
@ -0,0 +1,16 @@
|
|||
/*!
|
||||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
const autumnTheme = {
|
||||
name: 'Autumn',
|
||||
params: {
|
||||
accentHue: 50,
|
||||
accentSaturation: 86,
|
||||
accentLuminance: 67,
|
||||
backgroundLevel: 95,
|
||||
backgroundHueShift: 50,
|
||||
nominalHueStep: 10,
|
||||
},
|
||||
}
|
||||
export default autumnTheme
|
|
@ -1,11 +0,0 @@
|
|||
{
|
||||
"name": "Default",
|
||||
"params": {
|
||||
"accentHue": 252,
|
||||
"accentSaturation": 78,
|
||||
"accentLuminance": 49,
|
||||
"backgroundLevel": 95,
|
||||
"backgroundHueShift": 50,
|
||||
"nominalHueStep": 10
|
||||
}
|
||||
}
|
|
@ -0,0 +1,16 @@
|
|||
/*!
|
||||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
const defaultTheme = {
|
||||
name: 'Default',
|
||||
params: {
|
||||
accentHue: 252,
|
||||
accentSaturation: 78,
|
||||
accentLuminance: 49,
|
||||
backgroundLevel: 95,
|
||||
backgroundHueShift: 50,
|
||||
nominalHueStep: 10,
|
||||
},
|
||||
}
|
||||
export default defaultTheme
|
|
@ -1,124 +0,0 @@
|
|||
{
|
||||
"chart": {
|
||||
"backgroundColor": "none",
|
||||
"padding": 4
|
||||
},
|
||||
"plotArea": {
|
||||
"fillOpacity": 1,
|
||||
"strokeOpacity": 1,
|
||||
"strokeWidth": 0.5
|
||||
},
|
||||
"axisLine": {
|
||||
"fill": "none",
|
||||
"fillOpacity": 0,
|
||||
"strokeOpacity": 1,
|
||||
"strokeWidth": 0.5
|
||||
},
|
||||
"axisTicks": {
|
||||
"fill": "none",
|
||||
"fillOpacity": 0,
|
||||
"strokeOpacity": 1,
|
||||
"strokeWidth": 0.5,
|
||||
"innerSize": 0,
|
||||
"outerSize": 6
|
||||
},
|
||||
"axisTickLabels": {
|
||||
"fillOpacity": 1,
|
||||
"stroke": "none",
|
||||
"strokeOpacity": 0,
|
||||
"strokeWidth": 0,
|
||||
"fontFamily": "\"Segoe UI\", \"Segoe UI Web (West European)\", \"Segoe UI\", -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": 10,
|
||||
"padding": 3
|
||||
},
|
||||
"axisTitle": {
|
||||
"fillOpacity": 1,
|
||||
"stroke": "none",
|
||||
"strokeOpacity": 0,
|
||||
"strokeWidth": 0,
|
||||
"fontFamily": "\"Segoe UI\", \"Segoe UI Web (West European)\", \"Segoe UI\", -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": 11
|
||||
},
|
||||
"gridLines": {
|
||||
"fill": "none",
|
||||
"fillOpacity": 0,
|
||||
"strokeOpacity": 1,
|
||||
"strokeWidth": 0.5
|
||||
},
|
||||
"text": {
|
||||
"fillOpacity": 1,
|
||||
"stroke": "none",
|
||||
"strokeWidth": 0,
|
||||
"strokeOpacity": 0,
|
||||
"fontFamily": "\"Segoe UI\", \"Segoe UI Web (West European)\", \"Segoe UI\", -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", sans-serif",
|
||||
"fontWeight": "normal",
|
||||
"fontSize": 12
|
||||
},
|
||||
"tooltip": {
|
||||
"fillOpacity": 0.5,
|
||||
"strokeWidth": 1,
|
||||
"strokeOpacity": 0.75
|
||||
},
|
||||
"circle": {
|
||||
"fill": "none",
|
||||
"fillOpacity": 1,
|
||||
"strokeWidth": 1,
|
||||
"strokeOpacity": 1,
|
||||
"radius": 4
|
||||
},
|
||||
"rect": {
|
||||
"fillOpacity": 1,
|
||||
"stroke": "none",
|
||||
"strokeWidth": 1,
|
||||
"strokeOpacity": 1
|
||||
},
|
||||
"line": {
|
||||
"fill": "none",
|
||||
"fillOpacity": 1,
|
||||
"strokeWidth": 2,
|
||||
"strokeOpacity": 1
|
||||
},
|
||||
"rule": {
|
||||
"fill": "none",
|
||||
"fillOpacity": 1,
|
||||
"strokeWidth": 3,
|
||||
"strokeOpacity": 1
|
||||
},
|
||||
"area": {
|
||||
"fillOpacity": 1,
|
||||
"stroke": "none",
|
||||
"strokeWidth": 1,
|
||||
"strokeOpacity": 1
|
||||
},
|
||||
"arc": {
|
||||
"fillOpacity": 1,
|
||||
"strokeWidth": 1,
|
||||
"strokeOpacity": 1
|
||||
},
|
||||
"node": {
|
||||
"fillOpacity": 0.75,
|
||||
"strokeWidth": 1,
|
||||
"strokeOpacity": 0.5,
|
||||
"radius": 4
|
||||
},
|
||||
"link": {
|
||||
"fill": "none",
|
||||
"fillOpacity": 1,
|
||||
"strokeWidth": 0.5,
|
||||
"strokeOpacity": 0.5
|
||||
},
|
||||
"process": {
|
||||
"fillOpacity": 1,
|
||||
"strokeWidth": 1,
|
||||
"strokeOpacity": 1,
|
||||
"radius": 8
|
||||
},
|
||||
"flow": {
|
||||
"fill": "none",
|
||||
"fillOpacity": 1,
|
||||
"strokeWidth": 6,
|
||||
"strokeOpacity": 1
|
||||
}
|
||||
}
|
|
@ -0,0 +1,132 @@
|
|||
/*!
|
||||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
const themeDefaults = {
|
||||
chart: {
|
||||
backgroundColor: 'none',
|
||||
padding: 4,
|
||||
},
|
||||
plotArea: {
|
||||
fillOpacity: 1,
|
||||
strokeOpacity: 1,
|
||||
strokeWidth: 0.5,
|
||||
},
|
||||
axisLine: {
|
||||
fill: 'none',
|
||||
fillOpacity: 0,
|
||||
strokeOpacity: 1,
|
||||
strokeWidth: 0.5,
|
||||
},
|
||||
axisTicks: {
|
||||
fill: 'none',
|
||||
fillOpacity: 0,
|
||||
strokeOpacity: 1,
|
||||
strokeWidth: 0.5,
|
||||
innerSize: 0,
|
||||
outerSize: 6,
|
||||
},
|
||||
axisTickLabels: {
|
||||
fillOpacity: 1,
|
||||
stroke: 'none',
|
||||
strokeOpacity: 0,
|
||||
strokeWidth: 0,
|
||||
fontFamily:
|
||||
'"Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif',
|
||||
fontWeight: 'normal',
|
||||
fontSize: 10,
|
||||
padding: 3,
|
||||
},
|
||||
axisTitle: {
|
||||
fillOpacity: 1,
|
||||
stroke: 'none',
|
||||
strokeOpacity: 0,
|
||||
strokeWidth: 0,
|
||||
fontFamily:
|
||||
'"Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif',
|
||||
fontWeight: 'normal',
|
||||
fontSize: 11,
|
||||
},
|
||||
gridLines: {
|
||||
fill: 'none',
|
||||
fillOpacity: 0,
|
||||
strokeOpacity: 1,
|
||||
strokeWidth: 0.5,
|
||||
},
|
||||
text: {
|
||||
fillOpacity: 1,
|
||||
stroke: 'none',
|
||||
strokeWidth: 0,
|
||||
strokeOpacity: 0,
|
||||
fontFamily:
|
||||
'"Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif',
|
||||
fontWeight: 'normal',
|
||||
fontSize: 12,
|
||||
},
|
||||
tooltip: {
|
||||
fillOpacity: 0.5,
|
||||
strokeWidth: 1,
|
||||
strokeOpacity: 0.75,
|
||||
},
|
||||
circle: {
|
||||
fill: 'none',
|
||||
fillOpacity: 1,
|
||||
strokeWidth: 1,
|
||||
strokeOpacity: 1,
|
||||
radius: 4,
|
||||
},
|
||||
rect: {
|
||||
fillOpacity: 1,
|
||||
stroke: 'none',
|
||||
strokeWidth: 1,
|
||||
strokeOpacity: 1,
|
||||
},
|
||||
line: {
|
||||
fill: 'none',
|
||||
fillOpacity: 1,
|
||||
strokeWidth: 2,
|
||||
strokeOpacity: 1,
|
||||
},
|
||||
rule: {
|
||||
fill: 'none',
|
||||
fillOpacity: 1,
|
||||
strokeWidth: 3,
|
||||
strokeOpacity: 1,
|
||||
},
|
||||
area: {
|
||||
fillOpacity: 1,
|
||||
stroke: 'none',
|
||||
strokeWidth: 1,
|
||||
strokeOpacity: 1,
|
||||
},
|
||||
arc: {
|
||||
fillOpacity: 1,
|
||||
strokeWidth: 1,
|
||||
strokeOpacity: 1,
|
||||
},
|
||||
node: {
|
||||
fillOpacity: 0.75,
|
||||
strokeWidth: 1,
|
||||
strokeOpacity: 0.5,
|
||||
radius: 4,
|
||||
},
|
||||
link: {
|
||||
fill: 'none',
|
||||
fillOpacity: 1,
|
||||
strokeWidth: 0.5,
|
||||
strokeOpacity: 0.5,
|
||||
},
|
||||
process: {
|
||||
fillOpacity: 1,
|
||||
strokeWidth: 1,
|
||||
strokeOpacity: 1,
|
||||
radius: 8,
|
||||
},
|
||||
flow: {
|
||||
fill: 'none',
|
||||
fillOpacity: 1,
|
||||
strokeWidth: 6,
|
||||
strokeOpacity: 1,
|
||||
},
|
||||
}
|
||||
export default themeDefaults
|
|
@ -1,11 +0,0 @@
|
|||
{
|
||||
"name": "Metal",
|
||||
"params": {
|
||||
"accentHue": 242,
|
||||
"accentSaturation": 46,
|
||||
"accentLuminance": 45,
|
||||
"backgroundLevel": 98,
|
||||
"backgroundHueShift": 100,
|
||||
"nominalHueStep": 21
|
||||
}
|
||||
}
|
|
@ -0,0 +1,16 @@
|
|||
/*!
|
||||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
const metalTheme = {
|
||||
name: 'Metal',
|
||||
params: {
|
||||
accentHue: 242,
|
||||
accentSaturation: 46,
|
||||
accentLuminance: 45,
|
||||
backgroundLevel: 98,
|
||||
backgroundHueShift: 100,
|
||||
nominalHueStep: 21,
|
||||
},
|
||||
}
|
||||
export default metalTheme
|
|
@ -1,11 +0,0 @@
|
|||
{
|
||||
"name": "Ocean",
|
||||
"params": {
|
||||
"accentHue": 215,
|
||||
"accentSaturation": 95,
|
||||
"accentLuminance": 61,
|
||||
"backgroundLevel": 90,
|
||||
"backgroundHueShift": 40,
|
||||
"nominalHueStep": 0
|
||||
}
|
||||
}
|
|
@ -0,0 +1,16 @@
|
|||
/*!
|
||||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
const oceanTheme = {
|
||||
name: 'Ocean',
|
||||
params: {
|
||||
accentHue: 215,
|
||||
accentSaturation: 95,
|
||||
accentLuminance: 61,
|
||||
backgroundLevel: 90,
|
||||
backgroundHueShift: 40,
|
||||
nominalHueStep: 0,
|
||||
},
|
||||
}
|
||||
export default oceanTheme
|
|
@ -2,10 +2,10 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { Params, Scheme, Color, ColorBlindnessMode } from '@thematic/color'
|
||||
import { ThemeConfig } from './ThemeConfig'
|
||||
import { ThemeSpec, ThemeDefinition } from './ThemeDefinition'
|
||||
import { ScaleType, SelectionState, ThemeVariant } from './enums'
|
||||
import type { Params, Scheme, Color, ColorBlindnessMode } from '@thematic/color'
|
||||
import type { ThemeConfig } from './ThemeConfig.js'
|
||||
import type { ThemeSpec, ThemeDefinition } from './ThemeDefinition.js'
|
||||
import type { ScaleType, SelectionState, ThemeVariant } from './enums.js'
|
||||
|
||||
/**
|
||||
* Overall application level config, e.g., 'chrome'.
|
||||
|
|
|
@ -2,9 +2,9 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { ColorBlindnessMode } from '@thematic/color'
|
||||
import { ThemeDefinition } from './ThemeDefinition'
|
||||
import { ThemeVariant } from './enums'
|
||||
import type { ColorBlindnessMode } from '@thematic/color'
|
||||
import type { ThemeDefinition } from './ThemeDefinition.js'
|
||||
import type { ThemeVariant } from './enums.js'
|
||||
|
||||
export interface ThemeConfig {
|
||||
/**
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { Params, Scheme } from '@thematic/color'
|
||||
import type { Params, Scheme } from '@thematic/color'
|
||||
|
||||
// TODO: the *Spec versions of these are for the raw json properties
|
||||
// this would be MUCH better specified as a JSONSchema with included validator
|
||||
|
|
|
@ -2,8 +2,8 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
export * from './enums'
|
||||
export * from './ThemeDefinition'
|
||||
export * from './Theme'
|
||||
export * from './ThemeConfig'
|
||||
export * from './ThemeListing'
|
||||
export * from './enums.js'
|
||||
export * from './ThemeDefinition.js'
|
||||
export * from './Theme.js'
|
||||
export * from './ThemeConfig.js'
|
||||
export * from './ThemeListing.js'
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"extends": "@essex/tsconfig-base",
|
||||
"compilerOptions": {
|
||||
"outDir": "lib",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
|
|
|
@ -2,11 +2,12 @@
|
|||
"name": "@thematic/d3",
|
||||
"version": "1.3.3",
|
||||
"license": "MIT",
|
||||
"main": "src/index.ts",
|
||||
"publishConfig": {
|
||||
"main": "dist/cjs/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"types": "dist/types/index.d.ts"
|
||||
"main": "dist/cjs/index.js",
|
||||
"types": "dist/types/index.d.ts",
|
||||
"exports": {
|
||||
"import": "./dist/esm/index.mjs",
|
||||
"require": "./dist/cjs/index.js",
|
||||
"types": "./dist/types/index.d.ts"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
@ -24,7 +25,8 @@
|
|||
"d3-selection": "^1.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@essex/scripts": "^19.0.5",
|
||||
"@essex/scripts": "^20.0.1",
|
||||
"@essex/tsconfig-base": "^1.0.1",
|
||||
"@types/d3-axis": "^1.0.16",
|
||||
"@types/d3-selection": "^1.4.3",
|
||||
"@types/node": "^14.18.5"
|
||||
|
|
|
@ -2,6 +2,6 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
export * from './svg'
|
||||
export * from './scales'
|
||||
export * from './layers'
|
||||
export * from './svg.js'
|
||||
export * from './scales.js'
|
||||
export * from './layers.js'
|
||||
|
|
|
@ -2,33 +2,33 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { Theme } from '@thematic/core'
|
||||
import { Axis } from 'd3-axis'
|
||||
import { Selection } from 'd3-selection'
|
||||
import type { Theme } from '@thematic/core'
|
||||
import type { Axis } from 'd3-axis'
|
||||
import type { Selection } from 'd3-selection'
|
||||
import {
|
||||
svg as svgCall,
|
||||
rect as rectCall,
|
||||
line as lineCall,
|
||||
text as textCall,
|
||||
} from './svg'
|
||||
} from './svg.js'
|
||||
|
||||
export interface SelectionOptions {
|
||||
/**
|
||||
* This is a map of event handlers to apply to the selection.
|
||||
*/
|
||||
on?: { [key: string]: any }
|
||||
on: { [key: string]: any }
|
||||
/**
|
||||
* This is a map of ad-hoc attrs to apply to the selection.
|
||||
*/
|
||||
attr?: { [key: string]: any }
|
||||
attr: { [key: string]: any }
|
||||
/**
|
||||
* Map of ad-hoc classes to add or remove from the selection.
|
||||
*/
|
||||
classed?: { [key: string]: any }
|
||||
classed: { [key: string]: any }
|
||||
/**
|
||||
* Map of ad-hoc styles to add or remove from the selection.
|
||||
*/
|
||||
style?: { [key: string]: any }
|
||||
style: { [key: string]: any }
|
||||
}
|
||||
|
||||
export interface ChartOptions extends SelectionOptions {
|
||||
|
@ -44,8 +44,8 @@ export interface PlotAreaOptions extends ChartOptions {
|
|||
}
|
||||
|
||||
function getSelectionOptions(
|
||||
selection: Selection<Element, any, Element, any>,
|
||||
options?: SelectionOptions,
|
||||
_selection: Selection<Element, any, Element, any>,
|
||||
options?: Partial<SelectionOptions>,
|
||||
): SelectionOptions {
|
||||
const _on = (options && options.on) || {}
|
||||
const _attr = (options && options.attr) || {}
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { Theme, ScaleType, SelectionState } from '@thematic/core'
|
||||
import { Selection } from 'd3-selection'
|
||||
import type { Selection } from 'd3-selection'
|
||||
|
||||
/**
|
||||
* Creates a d3-compatible nominal scale using the theme.
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import {
|
||||
import type {
|
||||
Chart,
|
||||
SVGMark,
|
||||
PlotArea,
|
||||
|
@ -15,7 +15,7 @@ import {
|
|||
Link,
|
||||
Text,
|
||||
} from '@thematic/core'
|
||||
import { Selection } from 'd3-selection'
|
||||
import type { Selection } from 'd3-selection'
|
||||
|
||||
export function svg(
|
||||
selection: Selection<Element, any, Element, any>,
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"extends": "@essex/tsconfig-base",
|
||||
"compilerOptions": {
|
||||
"outDir": "lib",
|
||||
"strict": false,
|
||||
"resolveJsonModule": true,
|
||||
"allowSyntheticDefaultImports": true
|
||||
"lib": ["ESNext", "DOM"]
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
|
|
|
@ -2,11 +2,12 @@
|
|||
"name": "@thematic/fluent",
|
||||
"version": "2.1.0",
|
||||
"license": "MIT",
|
||||
"main": "src/index.ts",
|
||||
"publishConfig": {
|
||||
"main": "dist/cjs/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"types": "dist/types/index.d.ts"
|
||||
"main": "dist/cjs/index.js",
|
||||
"types": "dist/types/index.d.ts",
|
||||
"exports": {
|
||||
"import": "./dist/esm/index.mjs",
|
||||
"require": "./dist/cjs/index.js",
|
||||
"types": "./dist/types/index.d.ts"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
@ -26,7 +27,8 @@
|
|||
"d3-scale": "^3.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@essex/scripts": "^19.0.5",
|
||||
"@essex/scripts": "^20.0.1",
|
||||
"@essex/tsconfig-base": "^1.0.1",
|
||||
"@fluentui/font-icons-mdl2": "^8.1.20",
|
||||
"@fluentui/react": "^8.49.0",
|
||||
"@types/chroma-js": "^2.1.3",
|
||||
|
|
|
@ -8,8 +8,8 @@ import {
|
|||
ThemeImpl,
|
||||
ThemeVariant,
|
||||
} from '@thematic/core'
|
||||
import { themeJson } from './theme'
|
||||
import { FluentTheme as IThematicFluentTheme } from './types'
|
||||
import { themeJson } from './theme/index.js'
|
||||
import type { FluentTheme as IThematicFluentTheme } from './types.js'
|
||||
|
||||
/**
|
||||
* Wraps a thematic theme to output Fluent palettes.
|
||||
|
|
|
@ -9,9 +9,9 @@ import {
|
|||
} from '@fluentui/react'
|
||||
|
||||
import { css2hsluv, Params } from '@thematic/color'
|
||||
import { Theme } from '@thematic/core'
|
||||
import type { Theme } from '@thematic/core'
|
||||
import { CSSProperties, FC, useCallback, useMemo } from 'react'
|
||||
import { useThematicFluent } from '../../provider'
|
||||
import { useThematicFluent } from '../../provider/index.js'
|
||||
|
||||
export enum ColorPickerLayout {
|
||||
PickerOnly,
|
||||
|
@ -67,7 +67,7 @@ export const ColorPicker: FC<ColorPickerProps> = ({
|
|||
)
|
||||
|
||||
const handlePickerChange = useCallback(
|
||||
(ev: React.SyntheticEvent<HTMLElement>, color: IColor) => {
|
||||
(_ev: React.SyntheticEvent<HTMLElement>, color: IColor) => {
|
||||
const [h, s, l] = css2hsluv(color.hex)
|
||||
updateParams({
|
||||
accentHue: h,
|
||||
|
|
|
@ -2,4 +2,4 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
export * from './ColorPicker'
|
||||
export * from './ColorPicker.js'
|
||||
|
|
|
@ -3,10 +3,10 @@
|
|||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { IconButton, Label } from '@fluentui/react'
|
||||
import { Theme } from '@thematic/core'
|
||||
import type { Theme } from '@thematic/core'
|
||||
import { memo, CSSProperties, FC, useMemo, useCallback } from 'react'
|
||||
import { useThematicFluent } from '../../provider'
|
||||
import { ColorPicker } from '../ColorPicker'
|
||||
import { useThematicFluent } from '../../provider/index.js'
|
||||
import { ColorPicker } from '../ColorPicker/index.js'
|
||||
|
||||
export interface ColorPickerButtonStyles {
|
||||
label?: CSSProperties
|
||||
|
|
|
@ -2,4 +2,4 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
export * from './ColorPickerButton'
|
||||
export * from './ColorPickerButton.js'
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
*/
|
||||
import { scaleLinear } from 'd3-scale'
|
||||
import { FC, useMemo } from 'react'
|
||||
import { ChipsProps } from './types'
|
||||
import type { ChipsProps } from './types.js'
|
||||
|
||||
export const ColorChips: FC<ChipsProps> = ({
|
||||
scale,
|
||||
|
|
|
@ -2,17 +2,18 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { FC, useMemo } from 'react'
|
||||
import { ChipsProps } from './types'
|
||||
import { FC, useMemo, CSSProperties } from 'react'
|
||||
import type { ChipsProps } from './types.js'
|
||||
|
||||
export const ContinuousBand: FC<ChipsProps> = ({ scale, width, height }) => {
|
||||
const style = useMemo(
|
||||
() => ({
|
||||
width,
|
||||
height,
|
||||
minWidth: width,
|
||||
minHeight: height,
|
||||
}),
|
||||
const style: CSSProperties = useMemo(
|
||||
() =>
|
||||
({
|
||||
width,
|
||||
height,
|
||||
minWidth: width,
|
||||
minHeight: height,
|
||||
} as CSSProperties),
|
||||
[width, height],
|
||||
)
|
||||
|
||||
|
|
|
@ -4,16 +4,16 @@
|
|||
*/
|
||||
import { Dropdown } from '@fluentui/react'
|
||||
import { FC, useCallback, useRef } from 'react'
|
||||
import { ScaleDropdownItem } from './ScaleDropdownItem'
|
||||
import { ScaleDropdownItem } from './ScaleDropdownItem.js'
|
||||
import {
|
||||
usePaletteWidth,
|
||||
usePaletteHeight,
|
||||
useContainerStyle,
|
||||
useItemStyle,
|
||||
useThematicScaleOptions,
|
||||
} from './hooks/theme'
|
||||
import { useSafeDimensions } from './hooks/useSafeDimensions'
|
||||
import { ScaleDropdownProps } from './types'
|
||||
} from './hooks/theme.js'
|
||||
import { useSafeDimensions } from './hooks/useSafeDimensions.js'
|
||||
import type { ScaleDropdownProps } from './types.js'
|
||||
|
||||
/**
|
||||
* Represents a Fluent dropdown of Thematic scale options.
|
||||
|
|
|
@ -3,9 +3,9 @@
|
|||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { FC, useMemo } from 'react'
|
||||
import { TEXT_WIDTH, useScale, usePaletteComponent } from './hooks/theme'
|
||||
import { useSafeCollapseDimensions } from './hooks/useSafeDimensions'
|
||||
import { ScaleDropdownItemProps } from './types'
|
||||
import { TEXT_WIDTH, useScale, usePaletteComponent } from './hooks/theme.js'
|
||||
import { useSafeCollapseDimensions } from './hooks/useSafeDimensions.js'
|
||||
import type { ScaleDropdownItemProps } from './types.js'
|
||||
|
||||
export const ScaleDropdownItem: FC<ScaleDropdownItemProps> = ({
|
||||
option,
|
||||
|
|
|
@ -2,15 +2,15 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { IDropdownOption } from '@fluentui/react'
|
||||
import {
|
||||
import type { IDropdownOption } from '@fluentui/react'
|
||||
import type {
|
||||
NominalColorScaleFunction,
|
||||
ContinuousColorScaleFunction,
|
||||
} from '@thematic/core'
|
||||
import React, { useMemo } from 'react'
|
||||
import { useThematicFluent } from '../../../provider'
|
||||
import { ChipsProps } from '../types'
|
||||
import { chooseScale, selectColorPalette } from '../util'
|
||||
import { useThematicFluent } from '../../../provider/index.js'
|
||||
import type { ChipsProps } from '../types.js'
|
||||
import { chooseScale, selectColorPalette } from '../util.js'
|
||||
|
||||
const ITEM_LEFT_PADDING = 8 // default right padding in fluent item
|
||||
const ITEM_BORDER_MODIFIER = 1 // accounts for transparent border on outer container
|
||||
|
|
|
@ -2,4 +2,4 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
export * from './ScaleDropdown'
|
||||
export * from './ScaleDropdown.js'
|
||||
|
|
|
@ -2,8 +2,8 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { IDropdownOption, IDropdownProps } from '@fluentui/react'
|
||||
import {
|
||||
import type { IDropdownOption, IDropdownProps } from '@fluentui/react'
|
||||
import type {
|
||||
ContinuousColorScaleFunction,
|
||||
NominalColorScaleFunction,
|
||||
} from '@thematic/core'
|
||||
|
|
|
@ -2,15 +2,15 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import {
|
||||
import type {
|
||||
Theme,
|
||||
NominalColorScaleFunction,
|
||||
ContinuousColorScaleFunction,
|
||||
} from '@thematic/core'
|
||||
import { FC } from 'react'
|
||||
import { ColorChips } from './ColorChips'
|
||||
import { ContinuousBand } from './ContinuousBand'
|
||||
import { ChipsProps } from './types'
|
||||
import type { FC } from 'react'
|
||||
import { ColorChips } from './ColorChips.js'
|
||||
import { ContinuousBand } from './ContinuousBand.js'
|
||||
import type { ChipsProps } from './types.js'
|
||||
|
||||
export function chooseScale(
|
||||
theme: Theme,
|
||||
|
|
|
@ -7,13 +7,13 @@ import {
|
|||
IChoiceGroupOption,
|
||||
IChoiceGroupStyles,
|
||||
} from '@fluentui/react'
|
||||
import { ScaleType } from '@thematic/core'
|
||||
import type { ScaleType } from '@thematic/core'
|
||||
import { FC, useCallback, useMemo } from 'react'
|
||||
|
||||
export interface ScaleTypeChoiceGroupProps {
|
||||
selectedType: ScaleType
|
||||
onChange?: (scaleType: ScaleType) => void
|
||||
label?: string
|
||||
label: string
|
||||
suppressQuantile?: boolean
|
||||
styles?: IChoiceGroupStyles
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
export * from './ColorPicker'
|
||||
export * from './ColorPickerButton'
|
||||
export * from './ScaleDropdown'
|
||||
export * from './ScaleTypeChoiceGroup'
|
||||
export * from './ColorPicker/index.js'
|
||||
export * from './ColorPickerButton/index.js'
|
||||
export * from './ScaleDropdown/index.js'
|
||||
export * from './ScaleTypeChoiceGroup/index.js'
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
export * from './components'
|
||||
export * from './loader'
|
||||
export * from './provider'
|
||||
export * from './types'
|
||||
export * from './components/index.js'
|
||||
export * from './loader.js'
|
||||
export * from './provider/index.js'
|
||||
export * from './types.js'
|
||||
|
|
|
@ -2,9 +2,9 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { Theme } from '@thematic/core'
|
||||
import { FluentTheme } from './FluentTheme'
|
||||
import { FluentTheme as IFluentTheme } from './types'
|
||||
import type { Theme } from '@thematic/core'
|
||||
import { FluentTheme } from './FluentTheme.js'
|
||||
import type { FluentTheme as IFluentTheme } from './types.js'
|
||||
|
||||
/**
|
||||
* Load a Fluent theme instance derived from a thematic theme
|
||||
|
|
|
@ -4,8 +4,8 @@
|
|||
*/
|
||||
import { loadById } from '@thematic/core'
|
||||
import { createContext } from 'react'
|
||||
import { loadFluentTheme } from '../loader'
|
||||
import { FluentTheme } from '../types'
|
||||
import { loadFluentTheme } from '../loader.js'
|
||||
import type { FluentTheme } from '../types.js'
|
||||
|
||||
const defaultTheme = loadById('default')
|
||||
const defaultFluentTheme = loadFluentTheme(defaultTheme)
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
*/
|
||||
import { initializeIcons } from '@fluentui/font-icons-mdl2'
|
||||
import { ThemeProvider } from '@fluentui/react'
|
||||
import { Theme } from '@thematic/core'
|
||||
import type { Theme } from '@thematic/core'
|
||||
import { ThematicProvider } from '@thematic/react'
|
||||
import { useMemo, FC } from 'react'
|
||||
import { loadFluentTheme } from '../loader'
|
||||
import { ThematicFluentContext } from './ThematicFluentContext'
|
||||
import { loadFluentTheme } from '../loader.js'
|
||||
import { ThematicFluentContext } from './ThematicFluentContext.js'
|
||||
|
||||
export interface ThematicFluentProviderProps {
|
||||
theme: Theme
|
||||
|
|
|
@ -2,5 +2,5 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
export * from './ThematicFluentProvider'
|
||||
export * from './useThematicFluent'
|
||||
export * from './ThematicFluentProvider.js'
|
||||
export * from './useThematicFluent.js'
|
||||
|
|
|
@ -3,8 +3,8 @@
|
|||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { useContext } from 'react'
|
||||
import { FluentTheme } from '../types'
|
||||
import { ThematicFluentContext } from './ThematicFluentContext'
|
||||
import type { FluentTheme } from '../types.js'
|
||||
import { ThematicFluentContext } from './ThematicFluentContext.js'
|
||||
|
||||
/**
|
||||
* Hook to retrieve the thematic theme directly.
|
||||
|
|
|
@ -2,5 +2,5 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
export * from './shades'
|
||||
export * from './themeJson'
|
||||
export * from './shades.js'
|
||||
export * from './themeJson.js'
|
||||
|
|
|
@ -88,6 +88,12 @@ export const correctShades = (
|
|||
inverted = false,
|
||||
): Record<string, string> => {
|
||||
const { foregroundColor, backgroundColor } = fluentJson
|
||||
if (!foregroundColor) {
|
||||
throw new Error('foregroundColor not defined')
|
||||
}
|
||||
if (!backgroundColor) {
|
||||
throw new Error('backgroundColor not defined')
|
||||
}
|
||||
if (inverted) {
|
||||
return {
|
||||
...fluentJson,
|
||||
|
|
|
@ -8,7 +8,7 @@ import {
|
|||
themeRulesStandardCreator,
|
||||
} from '@fluentui/react'
|
||||
import { Theme, ThemeVariant } from '@thematic/core'
|
||||
import { correctShades } from './shades'
|
||||
import { correctShades } from './shades.js'
|
||||
|
||||
type ThemeInputColors = {
|
||||
primaryColor: string
|
||||
|
@ -28,17 +28,17 @@ const fluentJson = (colors: ThemeInputColors, inverted = false): any => {
|
|||
const themeRules = themeRulesStandardCreator()
|
||||
ThemeGenerator.insureSlots(themeRules, inverted)
|
||||
ThemeGenerator.setSlot(
|
||||
themeRules[BaseSlots[BaseSlots.primaryColor]],
|
||||
themeRules[BaseSlots[BaseSlots.primaryColor]!]!,
|
||||
colors.primaryColor,
|
||||
inverted,
|
||||
)
|
||||
ThemeGenerator.setSlot(
|
||||
themeRules[BaseSlots[BaseSlots.foregroundColor]],
|
||||
themeRules[BaseSlots[BaseSlots.foregroundColor]!]!,
|
||||
colors.foregroundColor,
|
||||
inverted,
|
||||
)
|
||||
ThemeGenerator.setSlot(
|
||||
themeRules[BaseSlots[BaseSlots.backgroundColor]],
|
||||
themeRules[BaseSlots[BaseSlots.backgroundColor]!]!,
|
||||
colors.backgroundColor,
|
||||
inverted,
|
||||
)
|
||||
|
|
|
@ -2,8 +2,8 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { Theme as IFluentTheme } from '@fluentui/react'
|
||||
import { Theme as IThematicTheme } from '@thematic/core'
|
||||
import type { Theme as IFluentTheme } from '@fluentui/react'
|
||||
import type { Theme as IThematicTheme } from '@thematic/core'
|
||||
|
||||
/**
|
||||
* This interface provides a mapping from thematic theme config to a theme suitable for use
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"extends": "@essex/tsconfig-base",
|
||||
"compilerOptions": {
|
||||
"outDir": "lib",
|
||||
"strict": false,
|
||||
"resolveJsonModule": true,
|
||||
"allowSyntheticDefaultImports": true
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
|
|
|
@ -2,11 +2,12 @@
|
|||
"name": "@thematic/react",
|
||||
"version": "1.3.3",
|
||||
"license": "MIT",
|
||||
"main": "src/index.ts",
|
||||
"publishConfig": {
|
||||
"main": "dist/cjs/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"types": "dist/types/index.d.ts"
|
||||
"main": "dist/cjs/index.js",
|
||||
"types": "dist/types/index.d.ts",
|
||||
"exports": {
|
||||
"import": "./dist/esm/index.mjs",
|
||||
"require": "./dist/cjs/index.js",
|
||||
"types": "./dist/types/index.d.ts"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
@ -23,7 +24,8 @@
|
|||
"core-js": "^3.20.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@essex/scripts": "^19.0.5",
|
||||
"@essex/scripts": "^20.0.1",
|
||||
"@essex/tsconfig-base": "^1.0.1",
|
||||
"@types/node": "^14.18.5",
|
||||
"@types/react": "^17.0.38",
|
||||
"react": "^17.0.2"
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { FC, useMemo } from 'react'
|
||||
import { useThematic } from './'
|
||||
import { useThematic } from './useThematic.js'
|
||||
|
||||
/**
|
||||
* This component applies root-level styles to your application using the theme defaults.
|
||||
|
|
|
@ -2,9 +2,9 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { Theme } from '@thematic/core'
|
||||
import type { Theme } from '@thematic/core'
|
||||
import { FC, useMemo } from 'react'
|
||||
import { ThematicContext, defaultTheme } from './ThematicContext'
|
||||
import { ThematicContext, defaultTheme } from './ThematicContext.js'
|
||||
|
||||
export interface ThematicProviderProps {
|
||||
theme?: Theme
|
|
@ -2,6 +2,8 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
export * from './styles'
|
||||
export * from './ApplicationStyles'
|
||||
export * from './provider'
|
||||
export * from './styles.js'
|
||||
export * from './ApplicationStyles.js'
|
||||
export * from './useThematic.js'
|
||||
export * from './ThematicProvider.js'
|
||||
export * from './ThematicContext.js'
|
||||
|
|
|
@ -1,6 +0,0 @@
|
|||
/*!
|
||||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
export * from './useThematic'
|
||||
export * from './ThematicProvider'
|
|
@ -3,8 +3,8 @@
|
|||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { css2css } from '@thematic/color'
|
||||
import { SVGMark, Application } from '@thematic/core'
|
||||
import { CSSProperties } from 'react'
|
||||
import type { SVGMark, Application } from '@thematic/core'
|
||||
import type { CSSProperties } from 'react'
|
||||
|
||||
/**
|
||||
* Converts a basic mark config to CSS-compatible object
|
||||
|
|
|
@ -2,9 +2,9 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { Theme } from '@thematic/core'
|
||||
import type { Theme } from '@thematic/core'
|
||||
import { useContext } from 'react'
|
||||
import { ThematicContext } from './ThematicContext'
|
||||
import { ThematicContext } from './ThematicContext.js'
|
||||
|
||||
/**
|
||||
* Hook to retrieve the thematic theme directly.
|
|
@ -1,10 +1,8 @@
|
|||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"extends": "@essex/tsconfig-base",
|
||||
"compilerOptions": {
|
||||
"outDir": "lib",
|
||||
"strict": false,
|
||||
"resolveJsonModule": true,
|
||||
"allowSyntheticDefaultImports": true
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
|
|
|
@ -2,11 +2,12 @@
|
|||
"name": "@thematic/vega",
|
||||
"version": "1.3.3",
|
||||
"license": "MIT",
|
||||
"main": "src/index.ts",
|
||||
"publishConfig": {
|
||||
"main": "dist/cjs/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"types": "dist/types/index.d.ts"
|
||||
"main": "dist/cjs/index.js",
|
||||
"types": "dist/types/index.d.ts",
|
||||
"exports": {
|
||||
"import": "./dist/esm/index.mjs",
|
||||
"require": "./dist/cjs/index.js",
|
||||
"types": "./dist/types/index.d.ts"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
@ -22,7 +23,8 @@
|
|||
"core-js": "^3.20.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@essex/scripts": "^19.0.5",
|
||||
"@essex/scripts": "^20.0.1",
|
||||
"@essex/tsconfig-base": "^1.0.1",
|
||||
"@types/node": "^14.18.5",
|
||||
"vega": "5.15.0"
|
||||
},
|
||||
|
|
|
@ -2,8 +2,8 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { Theme, SVGMark } from '@thematic/core'
|
||||
import { Spec } from 'vega'
|
||||
import type { Theme, SVGMark } from '@thematic/core'
|
||||
import type { Spec } from 'vega'
|
||||
|
||||
function mark(mark: SVGMark) {
|
||||
const { fill, fillOpacity, stroke, strokeOpacity, strokeWidth } = mark
|
||||
|
|
|
@ -1,10 +1,7 @@
|
|||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"extends": "@essex/tsconfig-base",
|
||||
"compilerOptions": {
|
||||
"outDir": "lib",
|
||||
"strict": false,
|
||||
"resolveJsonModule": true,
|
||||
"allowSyntheticDefaultImports": true
|
||||
"outDir": "lib"
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
|
|
|
@ -35,15 +35,16 @@
|
|||
"vega": "5.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@essex/scripts": "^19.0.5",
|
||||
"@essex/vite-config": "^18.0.2",
|
||||
"@essex/scripts": "^20.0.1",
|
||||
"@essex/vite-config": "^19.0.0",
|
||||
"@types/d3-axis": "^1.0.16",
|
||||
"@types/d3-scale": "^2.2.6",
|
||||
"@types/d3-selection": "^1.4.3",
|
||||
"@types/node": "^14.18.5",
|
||||
"@types/react": "^17.0.38",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"vite": "^2.7.10"
|
||||
"typescript": "^4.5.5",
|
||||
"vite": "^2.8.0"
|
||||
},
|
||||
"browserslist": [
|
||||
">0.2%",
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
*/
|
||||
import { ThematicFluentProvider } from '@thematic/fluent'
|
||||
import { ApplicationStyles } from '@thematic/react'
|
||||
import { FC } from 'react'
|
||||
import type { FC } from 'react'
|
||||
import { useTheme } from '../../state'
|
||||
import { ControlPanel } from '../ControlPanel'
|
||||
import { ThemeEditor } from '../ThemeEditor'
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
*/
|
||||
|
||||
import './index.css'
|
||||
import { Theme, Application } from '@thematic/core'
|
||||
import type { Theme, Application } from '@thematic/core'
|
||||
import { useThematic } from '@thematic/react'
|
||||
import { FC, useMemo } from 'react'
|
||||
import { ColorStrip } from '../ColorStrip'
|
||||
|
|
|
@ -27,19 +27,19 @@ export const ColorPalette: FC<ColorPaletteProps> = ({ scaleItemCount }) => {
|
|||
usePalette()
|
||||
const accent = (
|
||||
<Fragment>
|
||||
<span style={{ color: accentColor }}>Accent {accentColor}</span>
|
||||
<span style={{ color: accentColor! }}>Accent {accentColor}</span>
|
||||
</Fragment>
|
||||
)
|
||||
const background = (
|
||||
<Fragment>
|
||||
<span style={{ color: foregroundColor }}>
|
||||
<span style={{ color: foregroundColor! }}>
|
||||
Background {backgroundColor}
|
||||
</span>
|
||||
</Fragment>
|
||||
)
|
||||
const foreground = (
|
||||
<Fragment>
|
||||
<span style={{ color: foregroundColor }}>
|
||||
<span style={{ color: foregroundColor! }}>
|
||||
Foreground {foregroundColor}
|
||||
</span>
|
||||
</Fragment>
|
||||
|
@ -59,13 +59,13 @@ export const ColorPalette: FC<ColorPaletteProps> = ({ scaleItemCount }) => {
|
|||
<div
|
||||
style={{
|
||||
border: `1px solid ${foregroundColor}`,
|
||||
background: backgroundColor,
|
||||
background: backgroundColor!,
|
||||
padding: '10px 30px 30px 30px',
|
||||
color: foregroundColor,
|
||||
color: foregroundColor!,
|
||||
textAlign: 'left',
|
||||
}}
|
||||
>
|
||||
<h2 style={{ color: foregroundColor }}>Application colors</h2>
|
||||
<h2 style={{ color: foregroundColor! }}>Application colors</h2>
|
||||
<ApplicationPalette />
|
||||
<ul
|
||||
style={{
|
||||
|
@ -77,9 +77,9 @@ export const ColorPalette: FC<ColorPaletteProps> = ({ scaleItemCount }) => {
|
|||
<li>
|
||||
{foreground} on {background} (contrast ratio:{' '}
|
||||
<Contrast
|
||||
foreground={foregroundColor}
|
||||
background={backgroundColor}
|
||||
error={errorColor}
|
||||
foreground={foregroundColor!}
|
||||
background={backgroundColor!}
|
||||
error={errorColor!}
|
||||
showLink
|
||||
/>
|
||||
)
|
||||
|
@ -87,15 +87,15 @@ export const ColorPalette: FC<ColorPaletteProps> = ({ scaleItemCount }) => {
|
|||
<li>
|
||||
{accent} on {background} (contrast ratio:{' '}
|
||||
<Contrast
|
||||
foreground={accentColor}
|
||||
background={backgroundColor}
|
||||
error={errorColor}
|
||||
foreground={accentColor!}
|
||||
background={backgroundColor!}
|
||||
error={errorColor!}
|
||||
showLink
|
||||
/>
|
||||
)
|
||||
</li>
|
||||
</ul>
|
||||
<h2 style={{ color: foregroundColor }}>Scales</h2>
|
||||
<h2 style={{ color: foregroundColor! }}>Scales</h2>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
|
@ -108,52 +108,52 @@ export const ColorPalette: FC<ColorPaletteProps> = ({ scaleItemCount }) => {
|
|||
>
|
||||
<ColorStrip
|
||||
label="Nominal "
|
||||
foreground={foregroundColor}
|
||||
background={backgroundColor}
|
||||
colors={nominal}
|
||||
foreground={foregroundColor!}
|
||||
background={backgroundColor!}
|
||||
colors={nominal!}
|
||||
/>
|
||||
<ColorStrip
|
||||
label="Nominal+"
|
||||
foreground={foregroundColor}
|
||||
background={backgroundColor}
|
||||
colors={nominalBold}
|
||||
labelColors={nominalMuted}
|
||||
foreground={foregroundColor!}
|
||||
background={backgroundColor!}
|
||||
colors={nominalBold!}
|
||||
labelColors={nominalMuted!}
|
||||
/>
|
||||
<ColorStrip
|
||||
label="Nominal-"
|
||||
foreground={foregroundColor}
|
||||
background={backgroundColor}
|
||||
colors={nominalMuted}
|
||||
labelColors={nominalBold}
|
||||
foreground={foregroundColor!}
|
||||
background={backgroundColor!}
|
||||
colors={nominalMuted!}
|
||||
labelColors={nominalBold!}
|
||||
/>
|
||||
<ColorBand
|
||||
label="Sequential"
|
||||
foreground={foregroundColor}
|
||||
colors={sequential}
|
||||
foreground={foregroundColor!}
|
||||
colors={sequential!}
|
||||
width={BAND_WIDTH}
|
||||
/>
|
||||
<ColorBand
|
||||
label="Sequential2"
|
||||
foreground={foregroundColor}
|
||||
colors={sequential2}
|
||||
foreground={foregroundColor!}
|
||||
colors={sequential2!}
|
||||
width={BAND_WIDTH}
|
||||
/>
|
||||
<ColorBand
|
||||
label="Diverging"
|
||||
foreground={foregroundColor}
|
||||
colors={diverging}
|
||||
foreground={foregroundColor!}
|
||||
colors={diverging!}
|
||||
width={BAND_WIDTH}
|
||||
/>
|
||||
<ColorBand
|
||||
label="Diverging2"
|
||||
foreground={foregroundColor}
|
||||
colors={diverging2}
|
||||
foreground={foregroundColor!}
|
||||
colors={diverging2!}
|
||||
width={BAND_WIDTH}
|
||||
/>
|
||||
<ColorBand
|
||||
label="Greys"
|
||||
foreground={foregroundColor}
|
||||
colors={greys}
|
||||
foreground={foregroundColor!}
|
||||
colors={greys!}
|
||||
width={BAND_WIDTH}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { CSSProperties, FC } from 'react'
|
||||
import type { CSSProperties, FC } from 'react'
|
||||
|
||||
import './index.css'
|
||||
|
||||
|
|
|
@ -10,7 +10,7 @@ import {
|
|||
Position,
|
||||
} from '@fluentui/react'
|
||||
import { ColorBlindnessMode, colorBlindnessInfo } from '@thematic/color'
|
||||
import { ThemeListing, Theme } from '@thematic/core'
|
||||
import type { ThemeListing, Theme } from '@thematic/core'
|
||||
import { ColorPickerButton } from '@thematic/fluent'
|
||||
import { useCallback, FC, useMemo } from 'react'
|
||||
import { EnumDropdown } from '../EnumDropdown'
|
||||
|
@ -58,7 +58,7 @@ export const ControlPanel: FC<ControlPanelProps> = ({
|
|||
onDarkModeChange,
|
||||
}) => {
|
||||
const handleThemeChange = useCallback(
|
||||
(event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption) => {
|
||||
(_event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption) => {
|
||||
if (option) {
|
||||
const found = themes.find(t => t.id === option.key)
|
||||
if (found) {
|
||||
|
@ -91,12 +91,12 @@ export const ControlPanel: FC<ControlPanelProps> = ({
|
|||
}, [darkMode, onDarkModeChange])
|
||||
|
||||
const handleDrawNodesChange = useCallback(
|
||||
(event: React.MouseEvent<HTMLElement>, checked?: boolean) =>
|
||||
(_event: React.MouseEvent<HTMLElement>, checked?: boolean) =>
|
||||
onDrawNodesChange(!!checked),
|
||||
[onDrawNodesChange],
|
||||
)
|
||||
const handleDrawLinksChange = useCallback(
|
||||
(event: React.MouseEvent<HTMLElement>, checked?: boolean) =>
|
||||
(_event: React.MouseEvent<HTMLElement>, checked?: boolean) =>
|
||||
onDrawLinksChange(!!checked),
|
||||
[onDrawLinksChange],
|
||||
)
|
||||
|
|
|
@ -2,9 +2,9 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { Theme } from '@thematic/core'
|
||||
import type { Theme } from '@thematic/core'
|
||||
import { ColorPicker, ColorPickerLayout } from '@thematic/fluent'
|
||||
import { FC } from 'react'
|
||||
import type { FC } from 'react'
|
||||
|
||||
import './index.css'
|
||||
|
||||
|
|
|
@ -2,8 +2,8 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { Theme } from '@thematic/core'
|
||||
import { FC } from 'react'
|
||||
import type { Theme } from '@thematic/core'
|
||||
import type { FC } from 'react'
|
||||
import { useSetTheme } from '../../state'
|
||||
import { ColorSelection } from './ColorSelection'
|
||||
import './index.css'
|
||||
|
|
|
@ -26,10 +26,9 @@ export interface EnumDropdownProps<E> {
|
|||
*/
|
||||
export function EnumDropdown<E>({
|
||||
enumeration,
|
||||
label,
|
||||
selected,
|
||||
onChange = () => null,
|
||||
styles,
|
||||
...props
|
||||
}: EnumDropdownProps<E>): JSX.Element {
|
||||
const options = useMemo(
|
||||
() =>
|
||||
|
@ -39,7 +38,7 @@ export function EnumDropdown<E>({
|
|||
[enumeration],
|
||||
)
|
||||
const handleChange = useCallback(
|
||||
(e: React.FormEvent, v: IDropdownOption | undefined) => {
|
||||
(_e: React.FormEvent, v: IDropdownOption | undefined) => {
|
||||
if (v) {
|
||||
setSelectedKey(v.key)
|
||||
onChange(v.key)
|
||||
|
@ -51,11 +50,10 @@ export function EnumDropdown<E>({
|
|||
const [selectedKey, setSelectedKey] = useState<string | number>(key)
|
||||
return (
|
||||
<Dropdown
|
||||
label={label}
|
||||
options={options}
|
||||
selectedKey={selectedKey}
|
||||
onChange={handleChange}
|
||||
styles={styles}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -22,7 +22,10 @@ const FluentControlsComponent: FC<FluentControlsComponentProps> = ({
|
|||
}) => {
|
||||
const theme = useThematic()
|
||||
const [scale, setScale] = useState<string>('<none>')
|
||||
const handleScaleChange = useCallback((e, option) => setScale(option.key), [])
|
||||
const handleScaleChange = useCallback(
|
||||
(_e, option) => setScale(option.key),
|
||||
[],
|
||||
)
|
||||
const [scaleType, setScaleType] = useState<ScaleType>(ScaleType.Linear)
|
||||
const handleScaleTypeChange = useCallback(type => setScaleType(type), [])
|
||||
const handlePickerChange = useCallback(t => themeLoaded(t), [themeLoaded])
|
||||
|
@ -70,6 +73,7 @@ const FluentControlsComponent: FC<FluentControlsComponentProps> = ({
|
|||
that pre-loads Thematic scale types.
|
||||
</p>
|
||||
<ScaleTypeChoiceGroup
|
||||
label=""
|
||||
selectedType={scaleType}
|
||||
onChange={handleScaleTypeChange}
|
||||
/>
|
||||
|
|
|
@ -2,8 +2,8 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { IPalette, Theme } from '@fluentui/react'
|
||||
import { FluentTheme } from '@thematic/fluent'
|
||||
import type { IPalette, Theme } from '@fluentui/react'
|
||||
import type { FluentTheme } from '@thematic/fluent'
|
||||
import { FC, useMemo } from 'react'
|
||||
import { ColorStrip } from '../ColorStrip'
|
||||
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { TextField } from '@fluentui/react'
|
||||
import { FC } from 'react'
|
||||
import type { FC } from 'react'
|
||||
|
||||
export interface JSONEditorProps {
|
||||
value: unknown
|
||||
|
|
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче