├── test └── blah.test.ts ├── .gitignore ├── .prettierrc ├── .eslintignore ├── .yarnrc.yml ├── .npmignore ├── .eslintrc ├── tsconfig.json ├── README.md ├── package.json └── src └── index.ts /test/blah.test.ts: -------------------------------------------------------------------------------- 1 | import { sum } from '../src'; 2 | 3 | describe('blah', () => { 4 | it('works', () => { 5 | expect(sum(1, 1)).toEqual(2); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | node_modules 4 | dist 5 | 6 | .yarn/* 7 | !.yarn/releases 8 | !.yarn/plugins 9 | !.yarn/sdks 10 | 11 | *.pnp 12 | 13 | .vscode/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "tabWidth": 2, 4 | "semi": true, 5 | "singleQuote": true, 6 | "jsxBracketSameLine": false, 7 | "trailingComma": "es5" 8 | } 9 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .publish/* 2 | dist/* 3 | example/dist/* 4 | lib/* 5 | node_modules/** 6 | .yarn/* 7 | .pnp.* 8 | 9 | .yarn/releases/* 10 | .yarn/cache/* 11 | .yarn/plugins/* 12 | .yarn/sdks/* 13 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | 3 | plugins: 4 | - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs 5 | spec: '@yarnpkg/plugin-interactive-tools' 6 | 7 | yarnPath: .yarn/releases/yarn-2.4.2.cjs 8 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/** 2 | test/* 3 | .github/* 4 | .eslintrc 5 | .prettierrc 6 | tsconfig.json 7 | rollup.config.js 8 | README.md 9 | example 10 | .storybook 11 | .vscode 12 | src 13 | webpack.config.js 14 | .yarn/* -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "env": { 4 | "browser": true, 5 | "es6": true, 6 | "node": true 7 | }, 8 | "extends": [ 9 | "plugin:@typescript-eslint/recommended", 10 | "plugin:unicorn/recommended", 11 | "prettier", 12 | "prettier/@typescript-eslint", 13 | "plugin:prettier/recommended" 14 | ], 15 | "globals": { 16 | "Atomics": "readonly", 17 | "SharedArrayBuffer": "readonly" 18 | }, 19 | "parserOptions": { 20 | "ecmaVersion": 12, 21 | "sourceType": "module" 22 | }, 23 | "plugins": ["react", "prettier", "@typescript-eslint", "unicorn", "import"], 24 | "rules": { 25 | "max-len": [ 26 | "warn", 27 | { 28 | "code": 100 29 | } 30 | ], 31 | "prettier/prettier": "error", 32 | "consistent-return": ["warn"], 33 | "no-unused-vars": ["off"], 34 | "unicorn/filename-case": ["off"], 35 | "unicorn/prevent-abbreviations": ["off"] 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs 3 | "include": ["src", "types"], 4 | "compilerOptions": { 5 | "module": "esnext", 6 | "lib": ["dom", "esnext"], 7 | "importHelpers": true, 8 | // output .d.ts declaration files for consumers 9 | "declaration": true, 10 | // output .js.map sourcemap files for consumers 11 | "sourceMap": true, 12 | // match output dir to input dir. e.g. dist/index instead of dist/src/index 13 | "rootDir": "./src", 14 | // stricter type-checking for stronger correctness. Recommended by TS 15 | "strict": true, 16 | // linter checks for common issues 17 | "noImplicitReturns": true, 18 | "noFallthroughCasesInSwitch": true, 19 | // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative 20 | "noUnusedLocals": true, 21 | "noUnusedParameters": true, 22 | // use Node's module resolution algorithm, instead of the legacy TS one 23 | "moduleResolution": "node", 24 | // interop between ESM and CJS modules. Recommended by TS 25 | "esModuleInterop": true, 26 | // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS 27 | "skipLibCheck": true, 28 | // error out if import and file system have a casing mismatch. Recommended by TS 29 | "forceConsistentCasingInFileNames": true, 30 | // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc` 31 | "noEmit": true, 32 | "allowSyntheticDefaultImports": true 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # chartjs-adapter-dayjs-4 2 | 3 | ## Overview 4 | 5 | This adapter allows the use of day.js with Chart.js time scale. 6 | 7 | Requires Chart.js **4.0.1** or later and dayjs **1.9.7** or later. 8 | 9 | **NOTE:** This adapter was designed for Chart.js v4 (which requires a separate date adapter for time scales to work properly), using this adapter in any version prior to 4 will override the default date-adapter 10 | 11 | ## Installation 12 | 13 | ### npm 14 | 15 | ```bash 16 | npm install dayjs chartjs-adapter-dayjs-4 --save 17 | ``` 18 | 19 | ```javascript 20 | import Chart from 'chart.js'; 21 | import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm'; 22 | ``` 23 | 24 | ## Configuration 25 | 26 | ### v4 [Chart.js documention](https://www.chartjs.org/docs/latest) 27 | 28 | Read the Chart.js documention [v4](https://www.chartjs.org/docs/latest) for possible date/time related options. For example, the time scale `time.*` options [v4](https://www.chartjs.org/docs/latest/axes/cartesian/time.html#configuration-options) can be overridden using the [Day.js formats](https://day.js.org/docs/en/display/format). 29 | 30 | ## Development 31 | 32 | You first need to install node dependencies (requires [Node.js](https://nodejs.org/)): 33 | 34 | **_NPM_** 35 | 36 | ```bash 37 | > npm install 38 | ``` 39 | 40 | **_Yarn_** 41 | 42 | ```bash 43 | > yarn add 44 | ``` 45 | 46 | ## License 47 | 48 | `chartjs-adapter-dayjs-4` is available under the [MIT license](LICENSE.md). 49 | 50 | ## Credits 51 | 52 | --- 53 | 54 | Moment Adapter source && README template 55 | 56 | [Ben McCann](https://github.com/benmccann) 57 | 58 | [Evert Timberg](https://github.com/etimberg) 59 | 60 | [stockiNail](https://github.com/stockiNail) 61 | 62 | --- 63 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "module", 3 | "version": "1.0.4", 4 | "license": "MIT", 5 | "main": "dist/index.js", 6 | "typings": "dist/index.d.ts", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/bolstycjw/chartjs-adapter-dayjs-4.git" 10 | }, 11 | "files": [ 12 | "dist", 13 | "src" 14 | ], 15 | "homepage": "https://github.com/bolstycjw/chartjs-adapter-dayjs-4.git#readme", 16 | "bugs": { 17 | "url": "https://github.com/bolstycjw/chartjs-adapter-dayjs-4.git/issues" 18 | }, 19 | "engines": { 20 | "node": ">=10" 21 | }, 22 | "scripts": { 23 | "start": "tsdx watch", 24 | "build": "tsdx build", 25 | "test": "tsdx test", 26 | "lint": "tsdx lint", 27 | "prepare": "tsdx build", 28 | "size": "size-limit", 29 | "analyze": "size-limit --why" 30 | }, 31 | "peerDependencies": { 32 | "chart.js": ">=4.0.1", 33 | "dayjs": "^1.9.7" 34 | }, 35 | "husky": { 36 | "hooks": { 37 | "pre-commit": "pretty-quick --staged && eslint --fix" 38 | } 39 | }, 40 | "name": "chartjs-adapter-dayjs-4", 41 | "author": "bolstycjw", 42 | "module": "dist/chartjs-adapter-dayjs-4.esm.js", 43 | "size-limit": [ 44 | { 45 | "path": "dist/chartjs-adapter-dayjs-4.cjs.production.min.js", 46 | "limit": "10 KB" 47 | }, 48 | { 49 | "path": "dist/chartjs-adapter-dayjs-4.esm.js", 50 | "limit": "10 KB" 51 | } 52 | ], 53 | "devDependencies": { 54 | "@size-limit/preset-small-lib": "^8.1.0", 55 | "@typescript-eslint/eslint-plugin": "^5.43.0", 56 | "@typescript-eslint/parser": "^5.43.0", 57 | "chart.js": "^4.0.1", 58 | "dayjs": "^1.11.6", 59 | "eslint": "^8.28.0", 60 | "eslint-config-prettier": "^8.5.0", 61 | "eslint-plugin-import": "^2.26.0", 62 | "eslint-plugin-prettier": "^4.2.1", 63 | "eslint-plugin-unicorn": "^44.0.2", 64 | "husky": "^8.0.2", 65 | "prettier": "^2.7.1", 66 | "pretty-quick": "^3.1.3", 67 | "size-limit": "^8.1.0", 68 | "tsdx": "^0.14.1", 69 | "tslib": "^2.4.1", 70 | "typescript": "^4.9.3" 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { _adapters } from 'chart.js'; 2 | 3 | import dayjs, { QUnitType } from 'dayjs'; 4 | 5 | import type { TimeUnit } from 'chart.js'; 6 | 7 | // Needed to handle the custom parsing 8 | import CustomParseFormat from 'dayjs/plugin/customParseFormat.js'; 9 | 10 | // Needed to handle quarter format 11 | import AdvancedFormat from 'dayjs/plugin/advancedFormat.js'; 12 | 13 | // Needed to handle adding/subtracting quarter 14 | import QuarterOfYear from 'dayjs/plugin/quarterOfYear.js'; 15 | 16 | // Needed to handle localization format 17 | import LocalizedFormat from 'dayjs/plugin/localizedFormat.js'; 18 | 19 | import isoWeek from 'dayjs/plugin/isoWeek.js'; 20 | 21 | dayjs.extend(AdvancedFormat); 22 | 23 | dayjs.extend(QuarterOfYear); 24 | 25 | dayjs.extend(LocalizedFormat); 26 | 27 | dayjs.extend(CustomParseFormat); 28 | 29 | dayjs.extend(isoWeek); 30 | 31 | const FORMATS = { 32 | datetime: 'MMM D, YYYY, h:mm:ss a', 33 | millisecond: 'h:mm:ss.SSS a', 34 | second: 'h:mm:ss a', 35 | minute: 'h:mm a', 36 | hour: 'hA', 37 | day: 'MMM D', 38 | week: 'll', 39 | month: 'MMM YYYY', 40 | quarter: '[Q]Q - YYYY', 41 | year: 'YYYY', 42 | }; 43 | 44 | _adapters._date.override({ 45 | //_id: 'dayjs', //DEBUG, 46 | formats: () => FORMATS, 47 | parse: function (value: any, format?: TimeUnit) { 48 | const valueType = typeof value; 49 | 50 | if (value === null || valueType === 'undefined') { 51 | return null; 52 | } 53 | 54 | if (valueType === 'string' && typeof format === 'string') { 55 | return dayjs(value, format).isValid() ? dayjs(value, format).valueOf() : null; 56 | } else if (!(value instanceof dayjs)) { 57 | return dayjs(value).isValid() ? dayjs(value).valueOf() : null; 58 | } 59 | return null; 60 | }, 61 | format: function (time: any, format: TimeUnit): string { 62 | return dayjs(time).format(format); 63 | }, 64 | add: function (time: any, amount: number, unit: QUnitType & TimeUnit) { 65 | return dayjs(time).add(amount, unit).valueOf(); 66 | }, 67 | diff: function (max: any, min: any, unit: TimeUnit) { 68 | return dayjs(max).diff(dayjs(min), unit); 69 | }, 70 | startOf: function (time: any, unit: (TimeUnit & QUnitType) | 'isoWeek', weekday?: number) { 71 | if (unit === 'isoWeek') { 72 | // Ensure that weekday has a valid format 73 | //const formattedWeekday 74 | 75 | const validatedWeekday: number = 76 | typeof weekday === 'number' && weekday > 0 && weekday < 7 ? weekday : 1; 77 | 78 | return dayjs(time).isoWeekday(validatedWeekday).startOf('day').valueOf(); 79 | } 80 | 81 | return dayjs(time).startOf(unit).valueOf(); 82 | }, 83 | endOf: function (time: any, unit: TimeUnit & QUnitType) { 84 | return dayjs(time).endOf(unit).valueOf(); 85 | }, 86 | }); 87 | --------------------------------------------------------------------------------