@operato/scene-chartjs 2.0.0-alpha.9 → 2.0.0-beta.7

package/dist/ox-chart.d.ts

@@ -10,7 +10,7 @@ export declare class OxChart extends LitElement {
     private _chart?;
     _canvas: HTMLCanvasElement;
     firstUpdated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     updated(changes: PropertyValues<this>): void;
     initChart(): void;
     updateChartSize(): void;

package/dist/plugins/chart-series-highlight.d.ts

@@ -1,3 +1,4 @@
+import 'ses';
 declare const _default: {
     id: string;
     beforeDraw: (chartInstance: SceneChart) => void;

package/dist/plugins/chart-series-highlight.js

@@ -1,3 +1,4 @@
+import 'ses';
 function seriesHighlight(chartInstance, seriesData) {
     var _a;
     (_a = chartInstance.data.datasets) === null || _a === void 0 ? void 0 : _a.forEach(dataset => {
@@ -7,9 +8,10 @@ function seriesHighlight(chartInstance, seriesData) {
         }
         let highlightColor = highlight.color;
         let highlightCondition = highlight.condition;
+        const c = new Compartment();
         seriesData.forEach((sdata, sIndex) => {
             sdata.forEach((data, i) => {
-                if (!eval(highlightCondition)) {
+                if (!c.evaluate(highlightCondition)) {
                     return;
                 }
                 let meta = chartInstance.getDatasetMeta(sIndex);

package/dist/plugins/chart-series-highlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-series-highlight.js","sourceRoot":"","sources":["../../src/plugins/chart-series-highlight.ts"],"names":[],"mappings":"AAEA,SAAS,eAAe,CAAC,aAAyB,EAAE,UAAiC;;IACnF,MAAA,aAAa,CAAC,IAAI,CAAC,QAAQ,0CAAE,OAAO,CAAC,OAAO,CAAC,EAAE;QAC7C,IAAI,SAAS,GAAG,OAAO,CAAC,SAAS,CAAA;QACjC,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAM;QACR,CAAC;QAED,IAAI,cAAc,GAAG,SAAS,CAAC,KAAK,CAAA;QACpC,IAAI,kBAAkB,GAAG,SAAS,CAAC,SAAS,CAAA;QAE5C,UAAU,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE;YACnC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAqB,EAAE,CAAS,EAAE,EAAE;gBACjD,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,EAAE,CAAC;oBAC9B,OAAM;gBACR,CAAC;gBAED,IAAI,IAAI,GAAG,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;gBAC/C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,GAAG,cAAc,CAAA;gBACpD,YAAY;gBACZ,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,oBAAoB,GAAG,cAAc,CAAA;gBAEzD,2CAA2C;YAC7C,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC;AAED,eAAe;IACb,EAAE,EAAE,wBAAwB;IAC5B,UAAU,EAAE,UAAU,aAAyB;QAC7C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAChC,OAAM;QACR,CAAC;QAED,IAAI,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAA;QACtD,eAAe,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA;IAC5C,CAAC;CACF,CAAA","sourcesContent":["import Chart from 'chart.js'\n\nfunction seriesHighlight(chartInstance: SceneChart, seriesData: SceneChart.DataSeries) {\n  chartInstance.data.datasets?.forEach(dataset => {\n    let highlight = dataset.highlight\n    if (!highlight) {\n      return\n    }\n\n    let highlightColor = highlight.color\n    let highlightCondition = highlight.condition\n\n    seriesData.forEach((sdata, sIndex) => {\n      sdata.forEach((data: SceneChart.Data, i: number) => {\n        if (!eval(highlightCondition)) {\n          return\n        }\n\n        let meta = chartInstance.getDatasetMeta(sIndex)\n        meta.data[i]._model.backgroundColor = highlightColor\n        //@ts-ignore\n        meta.data[i]._model.hoverBackgroundColor = highlightColor\n\n        // dataset.backgroundColor = highlightColor\n      })\n    })\n  })\n}\n\nexport default {\n  id: 'chart-series-highlight',\n  beforeDraw: function (chartInstance: SceneChart) {\n    if (!chartInstance.data.rawData) {\n      return\n    }\n\n    let seriesData = chartInstance.data.rawData.seriesData\n    seriesHighlight(chartInstance, seriesData)\n  }\n}\n"]}
+{"version":3,"file":"chart-series-highlight.js","sourceRoot":"","sources":["../../src/plugins/chart-series-highlight.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAA;AAEZ,SAAS,eAAe,CAAC,aAAyB,EAAE,UAAiC;;IACnF,MAAA,aAAa,CAAC,IAAI,CAAC,QAAQ,0CAAE,OAAO,CAAC,OAAO,CAAC,EAAE;QAC7C,IAAI,SAAS,GAAG,OAAO,CAAC,SAAS,CAAA;QACjC,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAM;QACR,CAAC;QAED,IAAI,cAAc,GAAG,SAAS,CAAC,KAAK,CAAA;QACpC,IAAI,kBAAkB,GAAG,SAAS,CAAC,SAAS,CAAA;QAC5C,MAAM,CAAC,GAAG,IAAI,WAAW,EAAE,CAAA;QAE3B,UAAU,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE;YACnC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAqB,EAAE,CAAS,EAAE,EAAE;gBACjD,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC;oBACpC,OAAM;gBACR,CAAC;gBAED,IAAI,IAAI,GAAG,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;gBAC/C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,GAAG,cAAc,CAAA;gBACpD,YAAY;gBACZ,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,oBAAoB,GAAG,cAAc,CAAA;gBAEzD,2CAA2C;YAC7C,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC;AAED,eAAe;IACb,EAAE,EAAE,wBAAwB;IAC5B,UAAU,EAAE,UAAU,aAAyB;QAC7C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAChC,OAAM;QACR,CAAC;QAED,IAAI,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAA;QACtD,eAAe,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA;IAC5C,CAAC;CACF,CAAA","sourcesContent":["import 'ses'\n\nfunction seriesHighlight(chartInstance: SceneChart, seriesData: SceneChart.DataSeries) {\n  chartInstance.data.datasets?.forEach(dataset => {\n    let highlight = dataset.highlight\n    if (!highlight) {\n      return\n    }\n\n    let highlightColor = highlight.color\n    let highlightCondition = highlight.condition\n    const c = new Compartment()\n\n    seriesData.forEach((sdata, sIndex) => {\n      sdata.forEach((data: SceneChart.Data, i: number) => {\n        if (!c.evaluate(highlightCondition)) {\n          return\n        }\n\n        let meta = chartInstance.getDatasetMeta(sIndex)\n        meta.data[i]._model.backgroundColor = highlightColor\n        //@ts-ignore\n        meta.data[i]._model.hoverBackgroundColor = highlightColor\n\n        // dataset.backgroundColor = highlightColor\n      })\n    })\n  })\n}\n\nexport default {\n  id: 'chart-series-highlight',\n  beforeDraw: function (chartInstance: SceneChart) {\n    if (!chartInstance.data.rawData) {\n      return\n    }\n\n    let seriesData = chartInstance.data.rawData.seriesData\n    seriesHighlight(chartInstance, seriesData)\n  }\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@operato/scene-chartjs",
   "description": "Things Scene ChartJS Component",
-  "version": "2.0.0-alpha.9",
+  "version": "2.0.0-beta.7",
   "author": "heartyoh",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -29,9 +29,7 @@
   "dependencies": {
     "@ctrl/tinycolor": "^3.1.6",
     "@hatiolab/things-scene": "^3.2.0",
-    "@material/mwc-icon-button": "^0.27.0",
-    "@polymer/iron-pages": "^3.0.1",
-    "@polymer/paper-tabs": "^3.1.0",
+    "@material/web": "^1.4.0",
     "@webcomponents/template": "^1.5.0",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "chart.js": "^2.9.4",
@@ -41,12 +39,13 @@
     "chartjs-plugin-style": "^0.5.0",
     "core-js": "^3.26.0",
     "lit": "^3.1.2",
-    "regenerator-runtime": "^0.13.3"
+    "regenerator-runtime": "^0.13.3",
+    "ses": "^1.5.0"
   },
   "devDependencies": {
     "@hatiolab/prettier-config": "^1.0.0",
-    "@things-factory/builder": "^7.0.1-alpha.0",
-    "@things-factory/operato-board": "^7.0.1-alpha.0",
+    "@things-factory/builder": "^7.0.1-beta.0",
+    "@things-factory/operato-board": "^7.0.1-beta.0",
     "@types/chart.js": "2.9.34",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
@@ -72,5 +71,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "1d9866ed1195dcb8bd7461c83cfd3e598b155c7c"
+  "gitHead": "0b03b749b4eaa40abdc60a38bf9c392808374ed8"
 }

package/schema.graphql

@@ -29,7 +29,7 @@ type AppBinding {
   email: EmailAddress!
   id: ID!
   locale: String
-  name: String!
+  name: String
   owner: Boolean
   reference: String
   refreshToken: String
@@ -133,7 +133,7 @@ type ApprovalLine {
   createdAt: DateTimeISO
   creator: User
   description: String
-  domain: Domain
+  domain: Domain!
   id: ID!
   model: [ApprovalLineItem!]
   name: String
@@ -283,11 +283,10 @@ type AuthProvider {
   clientSecret: String
   createdAt: DateTimeISO
   creator: User
-  domain: Domain
+  domain: Domain!
   id: ID!
   params: Object
   privateKey: String
-  state: String
   tenantId: String
   type: String
   updatedAt: DateTimeISO
@@ -305,6 +304,7 @@ type AuthProviderParameterSpec {
   name: String!
   placeholder: String
   property: Object
+  styles: Object
   type: String!
 }
 
@@ -411,7 +411,7 @@ type BoardTemplate {
   createdAt: DateTimeISO
   creator: User
   description: String
-  domain: Domain
+  domain: Domain!
   id: ID!
   mine: Boolean!
   model: String
@@ -462,7 +462,7 @@ type CommonCode {
   creator: User
   description: String
   details: [CommonCodeDetail!]!
-  domain: Domain
+  domain: Domain!
   id: ID!
   name: String!
   updatedAt: DateTimeISO
@@ -475,8 +475,9 @@ type CommonCodeDetail {
   createdAt: DateTimeISO
   creator: User
   description: String
-  domain: Domain
+  domain: Domain!
   id: ID!
+  labels: Object
   name: String!
   rank: Float
   updatedAt: DateTimeISO
@@ -493,6 +494,7 @@ input CommonCodeDetailPatch {
   cuFlag: String
   description: String
   id: ID
+  labels: Object
   name: String
   rank: Float
 }
@@ -516,6 +518,7 @@ type Connection {
   creator: User
   description: String
   domain: Domain
+  edge: Appliance
   endpoint: String
   id: ID!
   name: String!
@@ -535,6 +538,7 @@ input ConnectionPatch {
   active: Boolean
   cuFlag: String
   description: String
+  edge: ObjectRef
   endpoint: String
   id: ID
   name: String
@@ -544,7 +548,8 @@ input ConnectionPatch {
 
 type ConnectionState {
   description: String
-  domain: Domain
+  domain: Domain!
+  edge: Appliance
   id: String
   name: String
   state: String
@@ -573,7 +578,7 @@ type Contact {
   creator: User
   deletedAt: DateTimeISO
   department: String
-  domain: Domain
+  domain: Domain!
   email: EmailAddress
   id: ID!
   items: [ContactItem!]
@@ -644,7 +649,7 @@ type Department {
   creator: User
   deletedAt: DateTimeISO
   description: String
-  domain: Domain
+  domain: Domain!
   extension: String
   id: ID!
   manager: Employee
@@ -751,7 +756,7 @@ type Employee {
   creator: User
   deletedAt: DateTimeISO
   department: Department
-  domain: Domain
+  domain: Domain!
   email: EmailAddress
   extension: String
   hiredOn: String
@@ -817,7 +822,7 @@ type Entity {
   dataProp: String
   delStrategy: String
   description: String
-  domain: Domain
+  domain: Domain!
   extEntity: Boolean
   fixedColumns: Float
   id: ID!
@@ -842,7 +847,7 @@ type EntityColumn {
   creator: User
   defVal: String
   description: String
-  domain: Domain
+  domain: Domain!
   entity: Entity!
   formEditor: String
   formFormat: String
@@ -1015,7 +1020,7 @@ type Font {
   active: Boolean!
   createdAt: DateTimeISO
   creator: User
-  domain: Domain
+  domain: Domain!
   files: [Attachment!]
   id: ID!
   name: String!
@@ -1138,14 +1143,14 @@ type LoginHistoryList {
 type Menu {
   buttons: [MenuButton!]!
   category: String
-  children: [Menu!]!
+  children(permittedOnly: Boolean! = false): [Menu!]!
   columns: [MenuColumn!]!
   createdAt: DateTimeISO
   creator: User
   description: String
   detailFormId: String
   detailLayout: String
-  domain: Domain
+  domain: Domain!
   fixedColumns: Float
   gridSaveUrl: String
   hiddenFlag: Boolean
@@ -1157,6 +1162,7 @@ type Menu {
   name: String
   pagination: Boolean
   parent: Menu
+  privilege: PrivilegeObject
   rank: Float
   resourceId: String
   resourceName: String
@@ -1178,7 +1184,7 @@ type MenuButton {
   auth: String
   createdAt: DateTimeISO
   creator: User
-  domain: Domain
+  domain: Domain!
   icon: String
   id: ID!
   logic: String
@@ -1213,7 +1219,7 @@ type MenuColumn {
   creator: User
   defVal: String
   description: String
-  domain: Domain
+  domain: Domain!
   extField: Boolean
   formEditor: String
   formFormat: String
@@ -1302,7 +1308,7 @@ type MenuDetail {
   creator: User
   customView: String
   dataProp: String
-  domain: Domain
+  domain: Domain!
   entityId: String
   id: ID!
   masterField: String
@@ -1319,7 +1325,7 @@ type MenuDetail {
 type MenuDetailButton {
   createdAt: DateTimeISO
   creator: User
-  domain: Domain
+  domain: Domain!
   icon: String
   id: ID!
   logic: String
@@ -1353,7 +1359,7 @@ type MenuDetailColumn {
   creator: User
   defVal: String
   description: String
-  domain: Domain
+  domain: Domain!
   extField: Boolean
   formEditor: String
   formFormat: String
@@ -1478,6 +1484,7 @@ input MenuPatch {
   name: String
   pagination: Boolean
   parent: ObjectRef
+  privilege: PrivilegeInput
   rank: Int
   resourceId: String
   resourceName: String
@@ -1499,6 +1506,9 @@ type Mutation {
   attachContact(contactId: String!, id: String!): Employee!
   cancelInvitation(email: EmailAddress!, reference: String!, type: String!): Boolean!
 
+  """To clear translations cache"""
+  clearTranslationsCache: Boolean!
+
   """To clone a Board from existing Board"""
   cloneBoard(id: String!, patch: BoardPatch!, targetGroupId: String, targetSubdomain: String!): Board!
 
@@ -2303,12 +2313,14 @@ input NewCommonCode {
 input NewCommonCodeDetail {
   commonCode: ObjectRef!
   description: String
+  labels: Object
   name: String!
   rank: Float!
 }
 
 input NewConnection {
   description: String
+  edge: ObjectRef
   endpoint: String
   name: String!
   params: String
@@ -2450,6 +2462,7 @@ input NewMenu {
   name: String!
   pagination: Boolean
   parent: ObjectRef
+  privilege: PrivilegeInput
   rank: Int
   resourceId: String
   resourceName: String
@@ -2724,7 +2737,7 @@ type Notification {
   body: String
   createdAt: DateTimeISO
   creator: User
-  domain: Domain
+  domain: Domain!
   id: ID!
   image: String
   owner: User
@@ -2758,7 +2771,7 @@ type NotificationRule {
   creator: User
   deletedAt: DateTimeISO
   description: String
-  domain: Domain
+  domain: Domain!
   id: ID!
   name: String
 
@@ -2815,7 +2828,7 @@ type Oauth2Client {
   createdAt: DateTimeISO
   creator: User
   description: String
-  domain: Domain
+  domain: Domain!
   expires: DateTimeISO
   grantType: String
   icon: String
@@ -2948,12 +2961,12 @@ input Pagination {
 }
 
 type Partner {
-  approvedAt: DateTimeISO!
+  approvedAt: DateTimeISO
   approver: User
   domain: Domain!
   id: ID!
   partnerDomain: Domain!
-  requestedAt: DateTimeISO!
+  requestedAt: DateTimeISO
   requester: User
 }
 
@@ -2968,7 +2981,7 @@ type PartnerSetting {
   createdAt: DateTimeISO
   creator: User
   description: String
-  domain: Domain
+  domain: Domain!
   id: ID!
   name: String
   partnerDomain: Domain
@@ -2997,7 +3010,7 @@ input PartnerSettingPatch {
 type PayloadLog {
   createdAt: DateTimeISO
   creator: User
-  domain: Domain
+  domain: Domain!
   endpoint: String!
   id: ID!
   name: String!
@@ -3163,6 +3176,7 @@ type PropertySpec {
   name: String!
   placeholder: String
   property: Object
+  styles: Object
   type: String!
 }
 
@@ -3309,6 +3323,9 @@ type Query {
   """To fetch domains with given privilege for user"""
   domainsWithPrivilege(category: String!, privilege: String!): [Domain!]!
 
+  """To fetch multiple appliance"""
+  edges(filters: [Filter!], inherited: InheritedValueType, pagination: Pagination, sortings: [Sorting!]): ApplianceList!
+
   """To fetch a Employee"""
   employee(id: String!): Employee
 
@@ -3415,12 +3432,12 @@ type Query {
   myFavorites: [Favorite!]!
   myLoginHistories(limit: Float!): [LoginHistory!]!
 
+  """To fetch my own Menus"""
+  myMenus(filters: [Filter!], inherited: InheritedValueType, pagination: Pagination, sortings: [Sorting!]): MenuList!
+
   """To fetch my notifications"""
   myNotifications(filters: [Filter!], inherited: InheritedValueType, pagination: Pagination, sortings: [Sorting!]): NotificationList!
 
-  """To fetch current users privileges for current domain"""
-  myPrivileges: [Privilege!]!
-
   """To fetch roles of current user"""
   myRoles: [Role!]!
 
@@ -3572,7 +3589,7 @@ type Role {
   description: String
   domain: Domain!
   id: ID!
-  name: String!
+  name: String
   privileges: [Privilege!]
   updatedAt: DateTimeISO
   updater: User
@@ -3608,7 +3625,7 @@ type Scenario {
   createdAt: DateTimeISO
   creator: User
   description: String
-  domain: Domain
+  domain: Domain!
   id: ID!
   instances: [ScenarioInstance!]
   name: String!
@@ -3704,7 +3721,7 @@ type Setting {
   createdAt: DateTimeISO
   creator: User
   description: String
-  domain: Domain
+  domain: Domain!
   id: ID!
   name: String!
   updatedAt: DateTimeISO
@@ -3741,7 +3758,7 @@ type StateRegister {
   createdAt: DateTimeISO
   creator: User
   description: String
-  domain: Domain
+  domain: Domain!
   id: ID!
   name: String
   refBy: String
@@ -3841,13 +3858,15 @@ type TaskTypeList {
 type Terminology {
   category: String!
   createdAt: DateTimeISO
+  creator: User
   description: String
   display: String!
-  domain: Domain
+  domain: Domain!
   id: ID!
   locale: String!
   name: String!
   updatedAt: DateTimeISO
+  updater: User
 }
 
 type TerminologyList {
@@ -3856,12 +3875,12 @@ type TerminologyList {
 }
 
 input TerminologyPatch {
-  category: String!
+  category: String
   cuFlag: String
   description: String
-  display: String!
+  display: String
   id: ID
-  locale: String!
+  locale: String
   name: String
 }
 
@@ -3872,7 +3891,7 @@ type Theme {
   creator: User
   deletedAt: DateTimeISO
   description: String
-  domain: Domain
+  domain: Domain!
   id: ID!
   name: String
   type: String
@@ -3912,7 +3931,7 @@ type User {
   email: EmailAddress!
   id: ID!
   locale: String
-  name: String!
+  name: String
   owner: Boolean
   reference: String
   roles: [Role!]!
@@ -3953,7 +3972,7 @@ type UserRole {
 type UsersAuthProviders {
   authProvider: AuthProvider
   createdAt: DateTimeISO
-  domain: Domain
+  domain: Domain!
   id: ID!
   ssoId: String
   updatedAt: DateTimeISO

package/src/editors/property-editor-chartjs-abstract.ts

@@ -306,18 +306,6 @@ export default class PropertyEditorChartJSAbstract extends LitElement {
             return String((element as HTMLInputElement).value)
         }
 
-      case 'PAPER-BUTTON':
-        return (element as any).active
-
-      case 'PAPER-LISTBOX':
-        return (element as any).selected
-
-      case 'THINGS-EDITOR-MULTIPLE-COLOR':
-        return (element as any).values
-
-      case 'THINGS-EDITOR-ANGLE-INPUT':
-        return Number((element as any).radian) || 0
-
       default:
         return (element as any).value
     }

package/src/editors/property-editor-chartjs-hbar.ts

@@ -1,6 +1,6 @@
-import '@material/mwc-icon-button'
-import '@polymer/paper-tabs/paper-tabs'
-import '@polymer/iron-pages/iron-pages'
+import '@material/web/icon/icon.js'
+import '@material/web/button/elevated-button.js'
+import '@material/web/tabs/tabs.js'
 
 import '@operato/i18n/ox-i18n.js'
 
@@ -90,73 +90,67 @@ export default class PropertyEditorChartJSHBar extends PropertyEditorChartJSMult
     return html`
       <div id="series-properties-container" fullwidth>
         <div id="tab-header">
-          <mwc-icon-button
+          <md-icon
             id="tab-nav-left-button"
-            icon="chevron_left"
-            @click=${(e: Event) => {
+            @tap=${(e: Event) => {
               this._onTabScrollNavLeft(e)
             }}
             disabled
-          ></mwc-icon-button>
-          <paper-tabs
+            >chevron_left</md-icon
+          >
+          <div
             id="tabs"
-            @iron-select=${(e: Event) => (this.currentSeriesIndex = (e.target as any).selected)}
-            .selected=${this.currentSeriesIndex}
-            no-bar
-            noink
-            scrollable
-            hide-scroll-buttons
+            @change=${(e: Event) => {
+              this.currentSeriesIndex = (e.target as any).activeTabIndex
+            }}
+            active-tab-index=${this.currentSeriesIndex}
             fit-container
           >
             ${this.datasets.map(
               (dataset: any, index: number) => html`
-                <paper-tab data-series="${index + 1}" noink
-                  >${index + 1}
+                <div
+                  data-series=${index + 1}
+                  data-tab-index=${index}
+                  tab
+                  ?selected=${index == this.currentSeriesIndex}
+                  @click=${(e: Event) => {
+                    const target = e.target as HTMLDivElement
+                    this.currentSeriesIndex = Number(target.getAttribute('data-tab-index'))
+                  }}
+                >
+                  ${index + 1}
                   ${!this.datasets || (this.datasets.length != 1 && this.currentSeriesIndex == index)
-                    ? html`
-                        <mwc-icon-button icon="close" @tap="${(e: Event) => this.onTapRemoveCurrentTab(e)}">
-                        </mwc-icon-button>
-                      `
+                    ? html` <md-icon @tap="${(e: Event) => this.onTapRemoveCurrentTab(e)}"> close </md-icon> `
                     : html``}
-                </paper-tab>
+                </div>
               `
             )}
-          </paper-tabs>
-          <mwc-icon-button
+          </div>
+          <md-icon
             id="tab-nav-right-button"
-            icon="chevron_right"
             @click=${(e: Event) => {
               this._onTabScrollNavRight(e)
             }}
             disabled
-          ></mwc-icon-button>
+            >chevron_right</md-icon
+          >
         </div>
         <div id="add-series-button-container">
-          <mwc-icon-button
-            id="add-series-button"
-            icon="add"
-            @tap=${(e: Event) => this.onTapAddTab(e)}
-          ></mwc-icon-button>
+          <md-icon id="add-series-button" @tap=${(e: Event) => this.onTapAddTab(e)}>add</md-icon>
         </div>
 
-        <iron-pages .selected=${this.currentSeriesIndex} .attr-for-selected="series-index">
-          ${this.datasets.map(
-            (dataset: any, index: number) => html`
-              <div class="tab-content" series-index="${index}">
-                <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
-                <input type="text" value-key="dataKey" .value=${this.dataKey} />
-                <label> <ox-i18n msgid="label.label">Label</ox-i18n> </label>
-                <input type="text" value-key="series.label" .value=${this.series.label} />
-                <label> <ox-i18n msgid="label.color">Color</ox-i18n> </label>
-                <ox-input-color value-key="color" .value=${this.color}></ox-input-color>
-                <label> <ox-i18n msgid="label.stack-group">Stack Group</ox-i18n> </label>
-                <input type="text" value-key="series.stack" .value=${this.series.stack || ''} />
-
-                ${this.displayValueTemplate()}
-              </div>
-            `
-          )}
-        </iron-pages>
+        <div class="tab-content">
+          <label> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
+          <input type="text" value-key="dataKey" .value=${this.dataKey} />
+          <label> <ox-i18n msgid="label.label">Label</ox-i18n> </label>
+          <input type="text" value-key="series.label" .value=${this.series.label} />
+          <label> <ox-i18n msgid="label.color">Color</ox-i18n> </label>
+          <ox-input-color value-key="color" .value=${this.color}></ox-input-color>
+          <label> <ox-i18n msgid="label.stack-group">Stack Group</ox-i18n> </label>
+          <input type="text" value-key="series.stack" .value=${this.series.stack || ''} />
+
+          ${this.displayValueTemplate()}
+        </div>
       </div>
     `
   }