Is order to customize Chart.js evend more I want to add another library.
I'm having a hard time loading a library for Chart.js
the library is chartjs-plugin-datalabels. I'm using chart.js 2.8.0
This is my require.config.js file
var require = {
urlArgs: "v=10",
baseUrl: "/",
waitSeconds: 0,
paths: {
"bootstrap": "Scripts/bootstrap",
"jquery": "Scripts/jquery-3.3.1",
"blockUI": "Scripts/jquery.blockUI",
"knockout": "Scripts/knockout-3.5.0",
"momentjs": "Scripts/moment.min", //needed by chart js
"chart": "Scripts/Chart.min", //chart js
"chartjs-plugin-datalabels": "Scripts/chartjs-plugin-datalabels.min", //chartjs plugin
"dataTables": "Scripts/DataTables/jquery.dataTables.min",
"text": "Scripts/text",
"sammy": "Scripts/sammy-0.7.5",
"common": "App/common",
"datepicker": "Scripts/bootstrap-datepicker",
"datepickerITA": "Scripts/locales/bootstrap-datepicker.it",
"toastr": "Scripts/toastr",
"api": "App/api",
"settings": "App/settings"
},
shim: {
"bootstrap": {
deps: ["jquery"]
},
"toastr": {
deps: ["jquery"]
},
"blockUI": {
deps: ["jquery"]
},
"dataTables": {
deps: ["jquery"]
},
"chart": {
deps: ["momentjs"]
},
"chartjs-plugin-datalabels": {
deps: ["chart"]
},
"sammy": {
deps: ["jquery"]
},
"common": {
deps: ["knockout", "jquery"]
},
"datepicker": {
deps: ["jquery", "bootstrap"]
},
"datepickerITA": {
deps: ["jquery", "bootstrap", "datepicker"]
},
"api": {
deps: ["jquery"]
}
}
This is the page configuration
define(["knockout", "text!./page-corso-progress.html", "toastr", "api", "common", "bootstrap", "chartjs-plugin-datalabels"], function (ko, pageTemplate, toastr, api, common, chart)
What is it that I'm doing wrong here?
Related
I'm using Rollup.js, and babel to bundle my js library. I noticed that my dist cjs files are referencing esm core-js helpers in addition to the correct cjs helpers.
For instance, in my final cjs file, I see a reference to both var _extends$2 = require('#babel/runtime-corejs3/helpers/esm/extends'); and var _extends$3 = require('#babel/runtime-corejs3/helpers/extends'); when I run yarn build:lib.
Has anyone seen this before? Been racking my brain and haven't been able to find what is the cause of this.
For reference,
package.json (condensed for brevity)
{
"name": "my-platform",
"version": "0.1.0",
"description": "",
"main": "dist/index.cjs",
"module": "dist/my-platform.esm.js",
"types": "dist/index.d.ts",
"engines": {
"node": ">=10.18.0"
},
"scripts": {
"build:lib": "rollup -c",
"build:docs": "build-storybook",
"build": "concurrently \"yarn build:lib\" \"yarn build:docs\"",
},
"sideEffects": false,
"peerDependencies": {
"#emotion/core": "^10.0.22",
"react": "^16.12.0 || 17"
},
"resolutions": {
"git-raw-commits": "2.0.8"
},
"devDependencies": {
"#babel/cli": "^7.12.7",
"#babel/core": "^7.12.7",
"#babel/plugin-transform-runtime": "^7.12.10",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "^7.12.7",
"#babel/preset-typescript": "^7.12.7",
"#commitlint/cli": "^11.0.0",
"#commitlint/config-conventional": "^11.0.0",
"#emotion/babel-preset-css-prop": "^10.0.23",
"#emotion/core": "^10.0.22",
"#jest/globals": "^26.6.2",
"#rollup/plugin-babel": "^5.2.2",
"#rollup/plugin-commonjs": "^17.1.0",
"#rollup/plugin-json": "^4.1.0",
"#rollup/plugin-node-resolve": "^11.1.0",
"#rollup/plugin-replace": "^2.3.4",
"#typescript-eslint/eslint-plugin": "^4.14.0",
"#typescript-eslint/parser": "^4.14.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.0.6",
"babel-plugin-annotate-pure-calls": "^0.4.0",
"babel-plugin-dev-expression": "^0.2.2",
"babel-plugin-macros": "^3.0.1",
"concurrently": "^5.0.1",
"fs-extra": "^9.1.0",
"husky": ">=4.3.8",
"jest": "^26.6.3",
"jest-emotion": "^10.0.26",
"jest-junit": "^12.0.0",
"path": "^0.12.7",
"prettier": "^2.2.1",
"react": "^17.0.1",
"react-docgen-typescript-loader": "^3.4.0",
"react-dom": "^17.0.1",
"react-test-renderer": "^17.0.1",
"regenerator-runtime": "^0.13.3",
"rollup": "^2.38.1",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.29.0",
"stylelint": "^13.9.0",
"stylelint-config-prettier": "^8.0.0",
"stylelint-config-standard": "^20.0.0",
"tsdx": "^0.14.1",
"tslib": "^2.1.0",
"typescript": "^4.1.3"
},
"dependencies": {
"#babel/runtime-corejs3": "~7.12.18"
}
}
babel.config
module.exports = (api) => {
const isTest = api.env('test');
api.cache.forever();
return {
presets: [
[
'#babel/preset-env',
isTest ? { targets: { node: 'current' } } : { modules: false },
],
'#babel/preset-react',
'#babel/preset-typescript',
'#emotion/babel-preset-css-prop',
],
plugins: [
'annotate-pure-calls',
'dev-expression',
'macros',
[
'#babel/plugin-transform-runtime',
{
corejs: 3,
version: '^7.12.5',
},
],
],
comments: false,
};
};
rollup.config.js
import fs from 'fs-extra';
import path from 'path';
import resolve from '#rollup/plugin-node-resolve';
import babel from '#rollup/plugin-babel';
import typescript from 'rollup-plugin-typescript2';
import json from '#rollup/plugin-json';
import commonjs from '#rollup/plugin-commonjs';
import replace from '#rollup/plugin-replace';
import del from 'rollup-plugin-delete';
import { terser } from 'rollup-plugin-terser';
import { DEFAULT_EXTENSIONS } from '#babel/core';
import pkg from './package.json';
const external = [
...Object.keys(pkg.peerDependencies || {}),
...Object.keys(pkg.dependencies || {}),
];
const makeExternalPredicate = (externalArr) => {
if (externalArr.length === 0) {
return () => false;
}
const pattern = new RegExp(`^(${externalArr.join('|')})($|/)`);
return (id) => pattern.test(id);
};
const configTerser = () =>
terser({
output: { comments: false },
compress: {
keep_infinity: true,
pure_getters: true,
passes: 10,
},
ecma: 5,
toplevel: true,
warnings: true,
});
function writeCjsEntryFile() {
const baseLine = `module.exports = require('./my-platform`;
const contents = `
'use strict'
if (process.env.NODE_ENV === 'production') {
${baseLine}.cjs.production.min.js')
} else {
${baseLine}.cjs.development.js')
}
`;
return fs.outputFile(path.join(__dirname, './dist', 'index.js'), contents);
}
const getEnv = (format, minify) => {
switch (format) {
case 'cjs':
return minify ? 'production.' : 'development.';
default:
return '';
}
};
const makeOutput = (format, minify) => ({
file: `dist/my-platform.${format}.${getEnv(format, minify)}${
minify ? 'min.' : ''
}js`,
esModule: true,
exports: 'named',
format,
freeze: false,
sourcemap: true,
plugins: [
minify && configTerser(),
format === 'cjs' && {
writeBundle: writeCjsEntryFile,
},
],
});
let currentBundleIndex = 0;
const makeRollupConfig = (minify, format) => {
return {
input: './src/index.ts',
output: makeOutput(format, minify),
plugins: [
currentBundleIndex === 1 && del({ targets: 'dist/**' }),
minify &&
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
resolve({
extensions: ['.js', '.jsx', '.ts', '.tsx'],
}),
json(),
typescript({
typescript: require('typescript'),
tsconfigOverride: {
exclude: [
'**/*.spec.ts',
'**/*.test.ts',
'**/*.stories.ts',
'**/*.spec.tsx',
'**/*.test.tsx',
'**/*.stories.tsx',
'node_modules',
'test',
],
compilerOptions: {
target: 'esnext',
rootDir: 'src',
},
},
}),
commonjs(),
babel({
babelHelpers: 'runtime',
exclude: 'node_modules/**',
extensions: [...DEFAULT_EXTENSIONS, '.ts', '.tsx'],
presets: [
[
'#babel/preset-env',
{
modules: false,
},
],
],
plugins: [
[
'#babel/plugin-transform-runtime',
{
useESModules: format === 'esm',
corejs: 3,
version: '^7.12.5',
},
],
],
}),
],
external: makeExternalPredicate(external),
};
};
export default [
makeRollupConfig(false, 'cjs'),
makeRollupConfig(false, 'esm'),
makeRollupConfig(true, 'cjs'),
];
Any help would be appreciated. Thanks!
Currently I am using Jest with puppeteer and I want combine that with MongoDB, is it possible to do that?
Here is my package.json look like:
{
"name": "testing",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"jest": {
"preset": "jest-puppeteer",
"testMatch": [
"**/tests/**/*.test.js"
],
"testTimeout": 80000,
"verbose": true
}
}
and my jest-puppeteer.config.js looks like this
module.exports = {
launch: {
defaultViewport: {
width: 1420,
height: 1080,
},
devtools: false,
headless: process.env.HEADLESS !== 'false',
slowMo: process.env.SLOWMO ? process.env.SLOWMO : 0,
},
};
Now I want to add mongoDB connection to the project with some predefined config something like this.
module.exports = {
mongodbMemoryServerOptions: {
binary: {
version: '4.0.3',
skipMD5: true
},
autoStart: false,
instance: {}
}
};
How do I combine puppeteer and mongoDB?
I integrated Material UI into my Svelte project with help of "Svelte Material UI" package.
But it don't contains Material layout-grid component.
I installed it separately using yarn add "#material/layout-grid" command.
But now I'm getting error during build process:
[!] (plugin postcss) Error: Invalid CSS after "...ch $size in map": expected expression (e.g. 1px, bold), was ".keys(variables.$co"
node_modules/#material/layout-grid/mdc-layout-grid.scss
Error: Invalid CSS after "...ch $size in map": expected expression (e.g. 1px, bold), was ".keys(variables.$co"
at options.error (/media/hdd-home/d/WebServers/home/spadmin.org/public_html/todoapp/node_modules/node-sass/lib/index.js:291:26)
So, I gave up resolving it myself.
The project package.json:
{
"name": "svelte-app",
"version": "1.0.0",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv ."
},
"devDependencies": {
"#mdi/js": "^5.3.45",
"#rollup/plugin-commonjs": "^12.0.0",
"#rollup/plugin-node-resolve": "^8.0.0",
"#smui/button": "^1.0.0-beta.21",
"#smui/card": "^1.0.0-beta.21",
"#smui/checkbox": "^1.0.0-beta.21",
"#smui/chips": "^1.0.0-beta.21",
"#smui/common": "^1.0.0-beta.21",
"#smui/form-field": "^1.0.0-beta.21",
"#smui/linear-progress": "^1.0.0-beta.21",
"#smui/textfield": "^1.0.0-beta.21",
"#smui/top-app-bar": "^1.0.0-beta.21",
"material": "^0.4.3",
"node-sass": "^4.14.1",
"rollup": "^2.3.4",
"rollup-plugin-copy": "^3.3.0",
"rollup-plugin-livereload": "^1.0.0",
"rollup-plugin-postcss": "^3.1.1",
"rollup-plugin-svelte": "^5.0.3",
"rollup-plugin-terser": "^5.1.2",
"svelte": "^3.0.0",
"svelte-preprocess": "^3.7.4"
},
"dependencies": {
"#material/layout-grid": "^6.0.0",
"sirv-cli": "^0.4.4"
}
}
And here is rollup.config.js
import svelte from 'rollup-plugin-svelte';
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import copy from 'rollup-plugin-copy';
import livereload from 'rollup-plugin-livereload';
import {terser} from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss';
import autoPreprocess from 'svelte-preprocess';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'scripts/app.js',
},
plugins: [
copy({
targets: [
{src: 'src/index.html', dest: '.'},
],
}),
svelte({
dev: !production,
emitCss: true,
css: css => {
css.write('css/app.css');
},
preprocess: autoPreprocess()
}),
resolve({
browser: true,
dedupe: ['svelte', '#material'],
}),
commonjs(),
postcss({
extract: 'css/app.css',
minimize: true,
sourceMap: true,
use: [
[
'sass', {
includePaths: [
'./theme',
'./node_modules',
],
},
],
],
}),
!production && serve(),
!production && livereload({watch: ['scripts', 'css', 'src', 'theme']}),
production && terser(),
],
watch: {
clearScreen: false,
},
};
function serve() {
let started = false;
return {
writeBundle() {
if (!started) {
started = true;
require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true,
});
}
},
};
}
It clearly tries to parse the scss file as css. So it probably misses the compile step. I can't find the scss rollup plugin in your package.json.
Check this, it could solve your problem: https://www.npmjs.com/package/rollup-plugin-scss
I am working on variant management using shell. I got 'getService' of undefined error in FLP. After adding below libraries, It worked.
Index.html
<script>
window["sap-ushell-config"] = {
defaultRenderer : "fiori2",
renderers: {
fiori2: {
componentData: {
config: {
search: "hidden"
}
}
}
},
applications: {
"OrderTracking-display": {
additionalInformation: "SAPUI5.Component=orders",
applicationType: "URL",
url: ".",
title: "Order Tracking"
}
}
};
</script>
<script src="/sap/public/bc/ui5_ui5/resources/sap/ushell_abap/bootstrap/abap.js" id="sap-ushell-bootstrap"></script>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ushell, sap.collaboration, sap.m, sap.ui.commons,
sap.ui.layout, sap.ui.ux3"
data-sap-ui-theme="sap_belize"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"orders": "."}'
data-sap-ui-frameOptions="trusted">
manifest.json
"sap.ui5": {
"rootView": {
"viewName": "orders.view.App",
"type": "XML",
"async": true,
"id": "app"
},
"dependencies": {
"minUI5Version": "1.42.0",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.f": {},
"sap.ushell": {},
"sap.collaboration": {
"lazy": true
}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "orders.i18n.i18n"
}
},
"": {
"dataSource": "mainService",
"preload": true
}
},
"services": {
"ShellUIService": {
"factoryName": "sap.ushell.ui5service.ShellUIService",
"lazy": false,
"settings": {
"setHierarchy": "auto",
"setTitle": "auto"
}
}
},
But I couldn't find ui5service.ShellUIService under sap.ushell. Also popups & date pickers is not working. How to make both sap.ushell.ui5service &
sap.ushell.services libraries work.
Below are the errors I get
Error -1
Error -2
There is no 'ui5service' under 'ushell'
sap.ushell
The index.html file is used to run an app from the WebIDE in test mode during development. A local launchpad called a Sandbox is created to run the app but not all services from launchpad (cloud or abap) are available.
The libraries that the app needs must be defined in the javascript files where they are needed.
I'm using Typescript, React, and Webpack and struggling to import the keymirror module.
I am using the latest version of typescript.
package.json
{
"name": "Fun",
"version": "1.0.0",
"description": "Dear Webpack Gods, please help.",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "",
"dependencies": {
"eventemitter3": "^1.1.1",
"flux": "^2.0.3",
"keymirror": "^0.1.1",
"react": "^0.13.3",
"ts-loader": "^0.5.0",
"typescript": "^1.6.0-dev.20150812"
},
"devDependencies": {
"css-loader": "^0.16.0",
"style-loader": "^0.12.3"
}
}
webpack.config.js
module.exports = {
entry: './App/app.tsx',
output: {
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.tsx', '.ts']
},
module: {
loaders: [
{ test: /\.ts(x?)$/, loader: 'ts-loader' },
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
}
}
tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"jsx": "react",
"sourceMap": true
},
"files": [
"./typings/tsd.d.ts",
"./App/app.tsx"
]
}
The offending import is located in ./User/Constants.ts
import keyMirror = require('keymirror');
export = keyMirror({
LOGIN_ATTEMPT: null
});
I have tried using the standalone npm module as seen above, as well as attempting to require it from react/lib/keyMirror.
Any ideas?
(EDIT: Yes, I know it's a 12 line module that I could just copy into my code.)
Solution from Basarat (with slight modification)
declare module 'keymirror' {
function keyMirror(obj: Object);
export = keyMirror;
}
import keyMirror = require('keymirror');
You need to tell typescript about it. Basically something like :
declare module 'keymirror' {
var export:any;
export = export;
}
In a file called global.d.ts.
Some docs : http://basarat.gitbooks.io/typescript/content/docs/types/ambient/intro.html