mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-08-11 20:40:20 +00:00
[canvasjs] update types for canvasjs to v1.9. (#18108)
* update to v1.9.10 * add missing propoty. * update test file. * tslint file and check * Update index.d.ts * Update index.d.ts change the type of lineThickness from string to number. * update reference method * update export method * export as global object * Rename canvasjs.ts to canvasjs-tests.ts * Update tsconfig.json file
This commit is contained in:
peter
+232
-234
@@ -1,248 +1,246 @@
|
||||
import * as CanvasJS from "canvasjs";
|
||||
|
||||
|
||||
namespace CanvasJS.Tests {
|
||||
// Column Chart
|
||||
var columnChart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title: {
|
||||
text: "Top Oil Reserves",
|
||||
},
|
||||
axisY: {
|
||||
title: "Reserves(MMbbl)"
|
||||
},
|
||||
legend: {
|
||||
verticalAlign: "bottom",
|
||||
horizontalAlign: "center"
|
||||
},
|
||||
theme: "theme2",
|
||||
data: [
|
||||
{
|
||||
type: "column",
|
||||
showInLegend: true,
|
||||
legendMarkerColor: "grey",
|
||||
legendText: "MMbbl = one million barrels",
|
||||
dataPoints: [
|
||||
{ y: 297571, label: "Venezuela" },
|
||||
{ y: 267017, label: "Saudi" },
|
||||
{ y: 175200, label: "Canada" },
|
||||
{ y: 154580, label: "Iran" },
|
||||
{ y: 116000, label: "Russia" },
|
||||
{ y: 97800, label: "UAE" },
|
||||
{ y: 20682, label: "US" },
|
||||
{ y: 20350, label: "China" }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
columnChart.render();
|
||||
|
||||
// Line Chart
|
||||
var lineChart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
theme: "theme2",
|
||||
title: {
|
||||
text: "Earthquakes - per month"
|
||||
},
|
||||
axisX: {
|
||||
valueFormatString: "MMM",
|
||||
interval: 1,
|
||||
intervalType: "month"
|
||||
|
||||
},
|
||||
axisY: {
|
||||
includeZero: false
|
||||
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "line",
|
||||
//lineThickness: 3,
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 0, 1), y: 450 },
|
||||
{ x: new Date(2012, 1, 1), y: 414 },
|
||||
{ x: new Date(2012, 2, 1), y: 520, indexLabel: "highest", markerColor: "red", markerType: "triangle" },
|
||||
{ x: new Date(2012, 3, 1), y: 460 },
|
||||
{ x: new Date(2012, 4, 1), y: 450 },
|
||||
{ x: new Date(2012, 5, 1), y: 500 },
|
||||
{ x: new Date(2012, 6, 1), y: 480 },
|
||||
{ x: new Date(2012, 7, 1), y: 480 },
|
||||
{ x: new Date(2012, 8, 1), y: 410, indexLabel: "lowest", markerColor: "DarkSlateGrey", markerType: "cross" },
|
||||
{ x: new Date(2012, 9, 1), y: 500 },
|
||||
{ x: new Date(2012, 10, 1), y: 480 },
|
||||
{ x: new Date(2012, 11, 1), y: 510 }
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
]
|
||||
});
|
||||
lineChart.render();
|
||||
|
||||
// Spline Chart
|
||||
var splineChart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
theme: "theme2",
|
||||
title: {
|
||||
text: "Game of Thrones, Viewers of the first airing on HBO"
|
||||
},
|
||||
axisY: {
|
||||
includeZero: false,
|
||||
// suffix: " k",
|
||||
valueFormatString: "#,,.",
|
||||
suffix: " mn"
|
||||
},
|
||||
toolTip: {
|
||||
shared: true
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "spline",
|
||||
showInLegend: true,
|
||||
name: "Season 2",
|
||||
// markerSize: 0,
|
||||
// color: "rgba(54,158,173,.6)",
|
||||
dataPoints: [
|
||||
{ label: "Ep. 1", y: 3858000 },
|
||||
{ label: "Ep. 2", y: 3759000 },
|
||||
{ label: "Ep. 3", y: 3766000 },
|
||||
{ label: "Ep. 4", y: 3654000 },
|
||||
{ label: "Ep. 5", y: 3903000 },
|
||||
{ label: "Ep. 6", y: 3879000 },
|
||||
{ label: "Ep. 7", y: 3694000 },
|
||||
{ label: "Ep. 8", y: 3864000 },
|
||||
{ label: "Ep. 9", y: 3384000 },
|
||||
{ label: "Ep. 10", y: 4200000 }
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "spline",
|
||||
showInLegend: true,
|
||||
// markerSize: 0,
|
||||
name: "Season 1",
|
||||
dataPoints: [
|
||||
{ label: "Ep. 1", y: 2220000 },
|
||||
{ label: "Ep. 2", y: 2200000 },
|
||||
{ label: "Ep. 3", y: 2440000 },
|
||||
{ label: "Ep. 4", y: 2450000 },
|
||||
{ label: "Ep. 5", y: 2580000 },
|
||||
{ label: "Ep. 6", y: 2440000 },
|
||||
{ label: "Ep. 7", y: 2400000 },
|
||||
{ label: "Ep. 8", y: 2720000 },
|
||||
{ label: "Ep. 9", y: 2660000 },
|
||||
{ label: "Ep. 10", y: 3040000 }
|
||||
|
||||
]
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
cursor: "pointer",
|
||||
itemclick: function (e) {
|
||||
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
|
||||
e.dataSeries.visible = false;
|
||||
}
|
||||
else {
|
||||
e.dataSeries.visible = true;
|
||||
}
|
||||
splineChart.render();
|
||||
}
|
||||
|
||||
},
|
||||
});
|
||||
splineChart.render();
|
||||
|
||||
// Bar Chart
|
||||
var barChart = new CanvasJS.Chart("chartContainer", {
|
||||
|
||||
// Column Chart
|
||||
let columnChart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title: {
|
||||
text: "Fortune Global 500 Companies by Country"
|
||||
},
|
||||
axisX: {
|
||||
interval: 1,
|
||||
gridThickness: 0,
|
||||
labelFontSize: 10,
|
||||
labelFontStyle: "normal",
|
||||
labelFontWeight: "normal",
|
||||
labelFontFamily: "Lucida Sans Unicode"
|
||||
text: "Top Oil Reserves",
|
||||
},
|
||||
axisY: {
|
||||
interlacedColor: "rgba(1,77,101,.2)",
|
||||
gridColor: "rgba(1,77,101,.1)"
|
||||
title: "Reserves(MMbbl)"
|
||||
},
|
||||
legend: {
|
||||
verticalAlign: "bottom",
|
||||
horizontalAlign: "center"
|
||||
},
|
||||
theme: "theme2",
|
||||
data: [
|
||||
{
|
||||
type: "bar",
|
||||
name: "companies",
|
||||
axisYType: "secondary",
|
||||
color: "#014D65",
|
||||
type: "column",
|
||||
showInLegend: true,
|
||||
legendMarkerColor: "grey",
|
||||
legendText: "MMbbl = one million barrels",
|
||||
dataPoints: [
|
||||
{ y: 5, label: "Sweden" },
|
||||
{ y: 6, label: "Taiwan" },
|
||||
{ y: 7, label: "Russia" },
|
||||
{ y: 8, label: "Spain" },
|
||||
{ y: 8, label: "Brazil" },
|
||||
{ y: 8, label: "India" },
|
||||
{ y: 9, label: "Italy" },
|
||||
{ y: 9, label: "Australia" },
|
||||
{ y: 12, label: "Canada" },
|
||||
{ y: 13, label: "South Korea" },
|
||||
{ y: 13, label: "Netherlands" },
|
||||
{ y: 15, label: "Switzerland" },
|
||||
{ y: 28, label: "Britain" },
|
||||
{ y: 32, label: "Germany" },
|
||||
{ y: 32, label: "France" },
|
||||
{ y: 68, label: "Japan" },
|
||||
{ y: 73, label: "China" },
|
||||
{ y: 132, label: "US" }
|
||||
{ y: 297571, label: "Venezuela" },
|
||||
{ y: 267017, label: "Saudi" },
|
||||
{ y: 175200, label: "Canada" },
|
||||
{ y: 154580, label: "Iran" },
|
||||
{ y: 116000, label: "Russia" },
|
||||
{ y: 97800, label: "UAE" },
|
||||
{ y: 20682, label: "US" },
|
||||
{ y: 20350, label: "China" }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
barChart.render();
|
||||
columnChart.render();
|
||||
let option = columnChart.get("title");
|
||||
columnChart.print();
|
||||
columnChart.exportChart({ format: "jpg" });
|
||||
columnChart.destroy();
|
||||
columnChart.axisX[0].convertPixelToValue(20);
|
||||
columnChart.toolTip.get("text");
|
||||
|
||||
// Pie Chart
|
||||
var pieChart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title: {
|
||||
text: "Desktop Search Engine Market Share, Dec-2012"
|
||||
},
|
||||
legend: {
|
||||
verticalAlign: "center",
|
||||
horizontalAlign: "left",
|
||||
fontSize: 20,
|
||||
fontFamily: "Helvetica"
|
||||
},
|
||||
theme: "theme2",
|
||||
data: [
|
||||
{
|
||||
type: "pie",
|
||||
indexLabelFontFamily: "Garamond",
|
||||
indexLabelFontSize: 20,
|
||||
indexLabel: "{label} {y}%",
|
||||
startAngle: -20,
|
||||
showInLegend: true,
|
||||
toolTipContent: "{legendText} {y}%",
|
||||
dataPoints: [
|
||||
{ y: 83.24, legendText: "Google", label: "Google" },
|
||||
{ y: 8.16, legendText: "Yahoo!", label: "Yahoo!" },
|
||||
{ y: 4.67, legendText: "Bing", label: "Bing" },
|
||||
{ y: 1.67, legendText: "Baidu", label: "Baidu" },
|
||||
{ y: 0.98, legendText: "Others", label: "Others" }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
pieChart.render();
|
||||
|
||||
addColorSet("MyColorSet", [
|
||||
"123456",
|
||||
"blue",
|
||||
"red",
|
||||
"orange"
|
||||
]);
|
||||
|
||||
addCultureInfo("js", {
|
||||
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
|
||||
// Line Chart
|
||||
let lineChart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
theme: "theme2",
|
||||
title: {
|
||||
text: "Earthquakes - per month"
|
||||
},
|
||||
axisX: {
|
||||
valueFormatString: "MMM",
|
||||
interval: 1,
|
||||
intervalType: "month"
|
||||
},
|
||||
axisY: {
|
||||
includeZero: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "line",
|
||||
// lineThickness: 3,
|
||||
dataPoints: [
|
||||
{ x: new Date(2012, 0, 1), y: 450 },
|
||||
{ x: new Date(2012, 1, 1), y: 414 },
|
||||
{ x: new Date(2012, 2, 1), y: 520, indexLabel: "highest", markerColor: "red", markerType: "triangle" },
|
||||
{ x: new Date(2012, 3, 1), y: 460 },
|
||||
{ x: new Date(2012, 4, 1), y: 450 },
|
||||
{ x: new Date(2012, 5, 1), y: 500 },
|
||||
{ x: new Date(2012, 6, 1), y: 480 },
|
||||
{ x: new Date(2012, 7, 1), y: 480 },
|
||||
{ x: new Date(2012, 8, 1), y: 410, indexLabel: "lowest", markerColor: "DarkSlateGrey", markerType: "cross" },
|
||||
{ x: new Date(2012, 9, 1), y: 500 },
|
||||
{ x: new Date(2012, 10, 1), y: 480 },
|
||||
{ x: new Date(2012, 11, 1), y: 510 }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
lineChart.render();
|
||||
|
||||
// Spline Chart
|
||||
let splineChart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
theme: "theme2",
|
||||
title: {
|
||||
text: "Game of Thrones, Viewers of the first airing on HBO"
|
||||
},
|
||||
axisY: {
|
||||
includeZero: false,
|
||||
// suffix: " k",
|
||||
valueFormatString: "#,,.",
|
||||
suffix: " mn"
|
||||
},
|
||||
toolTip: {
|
||||
shared: true
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "spline",
|
||||
showInLegend: true,
|
||||
name: "Season 2",
|
||||
// markerSize: 0,
|
||||
// color: "rgba(54,158,173,.6)",
|
||||
dataPoints: [
|
||||
{ label: "Ep. 1", y: 3858000 },
|
||||
{ label: "Ep. 2", y: 3759000 },
|
||||
{ label: "Ep. 3", y: 3766000 },
|
||||
{ label: "Ep. 4", y: 3654000 },
|
||||
{ label: "Ep. 5", y: 3903000 },
|
||||
{ label: "Ep. 6", y: 3879000 },
|
||||
{ label: "Ep. 7", y: 3694000 },
|
||||
{ label: "Ep. 8", y: 3864000 },
|
||||
{ label: "Ep. 9", y: 3384000 },
|
||||
{ label: "Ep. 10", y: 4200000 }
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "spline",
|
||||
showInLegend: true,
|
||||
// markerSize: 0,
|
||||
name: "Season 1",
|
||||
dataPoints: [
|
||||
{ label: "Ep. 1", y: 2220000 },
|
||||
{ label: "Ep. 2", y: 2200000 },
|
||||
{ label: "Ep. 3", y: 2440000 },
|
||||
{ label: "Ep. 4", y: 2450000 },
|
||||
{ label: "Ep. 5", y: 2580000 },
|
||||
{ label: "Ep. 6", y: 2440000 },
|
||||
{ label: "Ep. 7", y: 2400000 },
|
||||
{ label: "Ep. 8", y: 2720000 },
|
||||
{ label: "Ep. 9", y: 2660000 },
|
||||
{ label: "Ep. 10", y: 3040000 }
|
||||
]
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
cursor: "pointer",
|
||||
itemclick: (e) => {
|
||||
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
|
||||
e.dataSeries.visible = false;
|
||||
} else {
|
||||
e.dataSeries.visible = true;
|
||||
}
|
||||
splineChart.render();
|
||||
}
|
||||
},
|
||||
});
|
||||
splineChart.render();
|
||||
|
||||
// Bar Chart
|
||||
let barChart = new CanvasJS.Chart("chartContainer", {
|
||||
title: {
|
||||
text: "Fortune Global 500 Companies by Country"
|
||||
},
|
||||
axisX: {
|
||||
interval: 1,
|
||||
gridThickness: 0,
|
||||
labelFontSize: 10,
|
||||
labelFontStyle: "normal",
|
||||
labelFontWeight: "normal",
|
||||
labelFontFamily: "Lucida Sans Unicode"
|
||||
},
|
||||
axisY: {
|
||||
interlacedColor: "rgba(1,77,101,.2)",
|
||||
gridColor: "rgba(1,77,101,.1)"
|
||||
},
|
||||
data: [
|
||||
{
|
||||
type: "bar",
|
||||
name: "companies",
|
||||
axisYType: "secondary",
|
||||
color: "#014D65",
|
||||
dataPoints: [
|
||||
{ y: 5, label: "Sweden" },
|
||||
{ y: 6, label: "Taiwan" },
|
||||
{ y: 7, label: "Russia" },
|
||||
{ y: 8, label: "Spain" },
|
||||
{ y: 8, label: "Brazil" },
|
||||
{ y: 8, label: "India" },
|
||||
{ y: 9, label: "Italy" },
|
||||
{ y: 9, label: "Australia" },
|
||||
{ y: 12, label: "Canada" },
|
||||
{ y: 13, label: "South Korea" },
|
||||
{ y: 13, label: "Netherlands" },
|
||||
{ y: 15, label: "Switzerland" },
|
||||
{ y: 28, label: "Britain" },
|
||||
{ y: 32, label: "Germany" },
|
||||
{ y: 32, label: "France" },
|
||||
{ y: 68, label: "Japan" },
|
||||
{ y: 73, label: "China" },
|
||||
{ y: 132, label: "US" }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
barChart.render();
|
||||
|
||||
// Pie Chart
|
||||
let pieChart = new CanvasJS.Chart("chartContainer",
|
||||
{
|
||||
title: {
|
||||
text: "Desktop Search Engine Market Share, Dec-2012"
|
||||
},
|
||||
legend: {
|
||||
verticalAlign: "center",
|
||||
horizontalAlign: "left",
|
||||
fontSize: 20,
|
||||
fontFamily: "Helvetica"
|
||||
},
|
||||
theme: "theme2",
|
||||
data: [
|
||||
{
|
||||
type: "pie",
|
||||
indexLabelFontFamily: "Garamond",
|
||||
indexLabelFontSize: 20,
|
||||
indexLabel: "{label} {y}%",
|
||||
startAngle: -20,
|
||||
showInLegend: true,
|
||||
toolTipContent: "{legendText} {y}%",
|
||||
dataPoints: [
|
||||
{ y: 83.24, legendText: "Google", label: "Google" },
|
||||
{ y: 8.16, legendText: "Yahoo!", label: "Yahoo!" },
|
||||
{ y: 4.67, legendText: "Bing", label: "Bing" },
|
||||
{ y: 1.67, legendText: "Baidu", label: "Baidu" },
|
||||
{ y: 0.98, legendText: "Others", label: "Others" }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
pieChart.render();
|
||||
|
||||
CanvasJS.addColorSet("MyColorSet", [
|
||||
"123456",
|
||||
"blue",
|
||||
"red",
|
||||
"orange"
|
||||
]);
|
||||
|
||||
CanvasJS.addCultureInfo("js", {
|
||||
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
|
||||
});
|
||||
|
||||
CanvasJS.formatNumber(20);
|
||||
|
||||
CanvasJS.formatDate(new Date());
|
||||
|
||||
Vendored
+1423
-722
File diff suppressed because it is too large
Load Diff
@@ -19,4 +19,4 @@
|
||||
"index.d.ts",
|
||||
"canvasjs-tests.ts"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Reference in New Issue
Block a user