initial commit

README.md

@@ -0,0 +1,29 @@
+
+# Oracle APEX Region Type Plugin - KPI Numeric Card
+
+Region type plugin for displaying responsive kpi numeric cards. Fully customizable, including coloring, font-size to display target metric in your own custom styles.
+
+
+
+## Documentation
+
+In progress. Checkout the Demo Application mentioned below.
+
+## Donate
+
+[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/MYasirAliShah/4)
+
+## Changelog
+
+#### 1.0 - Initial Release
+
+
+## Install
+- Import plugin file "region_type_plugin_com_planetapex_kpi_numeric_cards.sql" from source directory into your application
+- (Optional) Deploy the CSS/JS files from "src" directory on your webserver and change the "File Prefix" to webservers folder.
+
+## Preview
+![Oracle Apex Plugin KPI Numeric Card](assets/kpiNumericCard.png "KPI Numeric Card")
+
+## Demo Application
+[KPI Numeric Card Application](https://apex.oracle.com/pls/apex/f?p=83009:50 "KPI Numeric Card Homepage")

apexplugin.json

@@ -0,0 +1,38 @@
+{
+    "name": "KPI Numeric Card",
+    "version": "1.0",
+    "private": "N",
+    "description": "Region type plugin for displaying responsive kpi numeric cards",
+    "keywords": ["oracle", "apex", "plugin", "AJAX", "PPR", "region", "card", "performance", "responsive","kpi"],
+    "homepage": "https://github.com/planetapex/apex-plugin-kpiNumericCard",
+    "bugs": {
+        "url": "https://github.com/planetapex/apex-plugin-kpiNumericCard/issues",
+        "email": "[email protected]"
+    },
+    "license": "MIT",
+    "author": {
+        "name": "M.Yasir Ali Shah",
+        "email": "[email protected]",
+        "url": "http://apexfusion.blogspot.com/2017/07/oracle-apex-plugin-kpi-numeric-cards.html",
+        "twitter": "m_yasir_ali",
+        "linkedin": "https://www.linkedin.com/in/myasiralishah/",
+        "donationUrl": "https://www.paypal.me/MYasirAliShah/4"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/planetapex/apex-plugin-kpiNumericCard.git"
+    },
+    "private": false,
+    "oracle": {
+        "versions": ["11.2.0.1", "12.1.0.1"],
+        "apex": {
+            "versions": ["5.0.0", "5.1.0"],
+            "plugin": {
+                "internalName": "COM.PLANETAPEX.KPI_NUMERIC_CARDS",
+                "type": "region",
+                "demo": "https://apex.oracle.com/pls/apex/f?p=83009:50",
+                "previewImage": "https://raw.githubusercontent.com/planetapex/apex-plugin-kpiNumericCard/master/assets/kpiNumericCard.png"
+            }
+        }
+    }
+}

src/css/generalKPI.css

@@ -0,0 +1,116 @@
+@font-face {
+    font-family: KPIWidget;
+    src: url('fonts/Gotham-Medium.otf');
+}
+
+@font-face {
+    font-family: KPIWidgetNumber;
+    src: url('fonts/PT_DIN_Condensed_Cyrillic.ttf');
+}
+
+.kpi-container-div {
+    display: table;
+}
+
+.kpi-item {
+    display: table-cell;
+    padding-left: 13px;
+}
+
+.kpi-title {
+    /*background-color: #f4f4f4;*/
+    box-shadow: inset 0 -5px 20px rgba(0, 0, 0, .05);
+    color: #3e3e3e;
+    display: table;
+    font-size: 14px;
+    font-weight: bold;
+    width: 100%;
+    vertical-align: middle;
+}
+
+.kpi-title-text {
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.kpi-footer-text {
+    display: table-cell;
+    font-size: 12px;
+    color: #939393;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.kpi-footer-text a {
+    color: #939393;
+}
+
+.kpi-trend-up {
+    background: url("images/trend_up.png") no-repeat scroll right center rgba(0, 0, 0, 0);
+    width: 30px;
+}
+
+.kpi-trend-down {
+    background: url("images/trend_down.png") no-repeat scroll right center rgba(0, 0, 0, 0);
+    width: 30px;
+}
+
+.kpi-trend-flat {
+    width: 30px;
+}
+
+.kpi-trend-up-small {
+    background: url("images/trend_up_small.png") no-repeat scroll center right rgba(0, 0, 0, 0);
+    background-position: 5px;
+    display: table-cell;
+    height: 100%;
+    width: 20px;
+}
+
+.kpi-trend-down-small {
+    background: url("images/trend_down_small.png") no-repeat scroll center right rgba(0, 0, 0, 0);
+    background-position: 5px;
+    display: table-cell;
+    height: 100%;
+    width: 20px;
+}
+
+.kpi-trend-flat-small {
+    display: table-cell;
+    height: 100%;
+    width: 20px;
+}
+
+.kpi-delta-up {
+    display: table-cell;
+    font-family: KPIWidgetNumber;
+    font-size: 0.35em;
+    height: 100%;
+    vertical-align: middle;
+    width: 34px;
+    color: #9dd07c;
+    text-align: center;
+    /*border: 1px solid;*/
+}
+
+.kpi-delta-down {
+    display: table-cell;
+    font-family: KPIWidgetNumber;
+    font-size: 0.35em;
+    height: 100%;
+    vertical-align: middle;
+    width: 34px;
+    color: #e05d63;
+    text-align: center;
+}
+
+.kpi-delta-flat {
+    font-family: KPIWidgetNumber;
+    font-size: 0.35em;
+    height: 100%;
+    vertical-align: middle;
+    width: 34px;
+    color: #fff;
+    text-align: center;
+}

src/css/numTrendKPI.css

@@ -0,0 +1,36 @@
+.num-trend-kpi-data-text {
+    font-family: KPIWidgetNumber;
+    font-size: 55px;
+    color: #4c4c4c;
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.num-trend-kpi-data-text-small {
+    font-family: KPIWidgetNumber;
+    font-size: 42px;
+    color: #4c4c4c;
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
+}
+
+.num-trend-kpi-container {
+    font-family: KPIWidget;
+    color: #4c4c4c;
+    /*background-color: #f7f7f5;*/
+    box-shadow: 0 1px 5px rgba(0, 0, 0, .3), inset 0 10px 30px rgba(255, 255, 255, .3);
+}
+
+.num-trend-kpi-data {
+    text-align: center;
+    width: 100%;
+    font-size: 46px;
+}
+
+.num-trend-kpi-footer {
+    display: table;
+    text-align: center;
+    width: 100%;
+}

src/index.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>KPIWidgets Sample Page</title>
+
+    <script src="lib/jquery-1.11.2.min.js" type="text/javascript"></script>
+    <script src="lib/jquery-ui.min.js" type="text/javascript"></script>
+
+    <link type="text/css" href="css/generalKPI.css" rel="stylesheet" />
+    <link type="text/css" href="css/numTrendKPI.css" rel="stylesheet" />
+    <link type="text/css" href="css/topThreeKPI.css" rel="stylesheet" />
+    <link type="text/css" href="css/percentageKPI.css" rel="stylesheet" />
+
+    <script type="text/javascript" src="js/numTrendKPI.js"></script>
+    <script type="text/javascript" src="js/topThreeKPI.js"></script>
+    <script type="text/javascript" src="js/percentageKPI.js"></script>
+
+    <script>
+        $(document).ready(function() {
+            var kpiWidget = $("#numAndTrendKPI").NumTrendKPI({
+                title: "TOTAL REVENUE",
+                footer: "GOAL SET: $3500/WEEK",
+
+                data: {
+                    value: 49000,
+                    trend: "down"
+                        // trend: "down",
+                        // symbol: "$"
+                },
+
+                clickHandler: function() {
+                    alert("this is a click");
+                }
+            });
+
+            var topThreeKPI = $("#topThreeKPI").TopThreeKPI({
+                title: "TOP GROSSING APPS",
+                footer: "GOAL SET: $2400/DAY",
+
+                data: [{
+                    name: "My App",
+                    value: 1000.23,
+                    symbol: "$",
+                    trend: "up"
+                        //delta: 2 - change delta - optional
+                }, {
+                    name: "Another App of mine",
+                    value: 20000,
+                    symbol: "$",
+                    trend: "down"
+                }, {
+                    name: "My Third App",
+                    value: 300,
+                    symbol: "$",
+                    trend: "up"
+                }, {
+                    name: "Angry Birds",
+                    value: 2323444,
+                    symbol: "$",
+                    trend: "up"
+                }],
+
+                clickHandler: function() {
+                    alert("this is a click");
+                }
+            });
+
+            var percentageKPI = $("#percentage").PercentageKPI({
+                title: "TOP GROSSING AGE GROUP",
+                footer: "3,334 users",
+                data: {
+                    value: "18-25",
+                    partial: 1234,
+                    total: 3334
+                },
+
+                clickHandler: function() {
+                    alert("this is a click");
+                }
+            });
+
+        });
+    </script>
+
+</head>
+
+<body>
+
+    <div class="kpi-container-div">
+        <div id="numAndTrendKPI" class="kpi-item" style="padding-left: 0px;"></div>
+        <div id="topThreeKPI" class="kpi-item"></div>
+        <div id="percentage" class="kpi-item"></div>
+    </div>
+
+</body>
+
+</html>