ngx-d3-tooltip/ngx-d3-tooltip.metadata.json

Add tooltips to your d3 visualizations using Angular Components.

{"__symbolic":"module","version":3,"metadata":{"D3TooltipModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"entryComponents":[{"__symbolic":"reference","name":"D3TooltipComponent"}],"declarations":[{"__symbolic":"reference","name":"D3TooltipComponent"},{"__symbolic":"reference","name":"D3TooltipHostDirective"}],"providers":[{"__symbolic":"reference","name":"D3TooltipService"}],"exports":[{"__symbolic":"reference","name":"D3TooltipComponent"}]}]}],"members":{}},"D3TooltipHostDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[d3TooltipHost]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}]}]}},"D3TooltipComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"d3-tooltip","template":"\n    <div class=\"ngx-d3-tooltip {{ cssClasses }}\" [ngClass]=\"{ 'ngx-d3-tooltip_visible': isVisible }\">\n      <div class=\"arrow\"></div>\n      <ng-template d3TooltipHost></ng-template>\n    </div>\n  ","styles":["\n    d3-tooltip {\n      position: absolute;\n      width: 0;\n      height: 0;\n      overflow: visible;\n      display: block;\n    }\n    d3-tooltip .ngx-d3-tooltip {\n      display: inline-block;\n      position: relative;\n      background-color: #fff;\n      border-color: #CCC;\n      border-radius: 2px;\n      -webkit-box-shadow: 0 1px 10px -3px rgba(0,0,0,0.3);\n              box-shadow: 0 1px 10px -3px rgba(0,0,0,0.3);\n      padding: 0.5rem 1rem;\n      opacity: 0;\n      -webkit-transition: opacity 0.2s ease-in;\n      transition: opacity 0.2s ease-in;\n      border: 1px solid #00000020;\n    }\n    d3-tooltip .ngx-d3-tooltip.ngx-d3-tooltip_visible {\n      opacity: 1;\n    }\n    d3-tooltip .ngx-d3-tooltip .arrow {\n      position: absolute;\n      display: block;\n      width: .8rem;\n      height: .4rem;\n    }\n    d3-tooltip .ngx-d3-tooltip .arrow::before, d3-tooltip .ngx-d3-tooltip .arrow::after {\n      position: absolute;\n      display: block;\n      border-color: #0000;\n      border-style: solid;\n      content: '';\n      border-width: 10px;\n    }\n    /* TOP */\n    d3-tooltip .ngx-d3-tooltip.top {\n      -webkit-transform: translateX(-50%);\n              transform: translateX(-50%);\n      position: absolute;\n      left: 0;\n      bottom: 20px;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.top .arrow {\n      bottom: 0;\n      left: 50%;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.top .arrow::before {\n      bottom: -20px;\n      margin-left: -10px;\n      border-top-color: #00000040;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.top .arrow::after {\n      bottom: -19px;\n      margin-left: -10px;\n      border-top-color: #fff;\n    }\n\n    /* BOTTOM */\n    d3-tooltip .ngx-d3-tooltip.bottom {\n      -webkit-transform: translateX(-50%);\n              transform: translateX(-50%);\n      position: absolute;\n      left: 0;\n      top: 20px;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.bottom .arrow {\n      top: 0;\n      left: 50%;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.bottom .arrow::before {\n      top: -20px;\n      margin-left: -10px;\n      border-bottom-color: #00000040;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.bottom .arrow::after {\n      top: -19px;\n      margin-left: -10px;\n      border-bottom-color: #fff;\n    }\n    /* LEFT */\n    d3-tooltip .ngx-d3-tooltip.left {\n      -webkit-transform: translateY(-50%);\n              transform: translateY(-50%);\n      position: absolute;\n      right: 20px;\n      top: 0;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.left .arrow {\n      right: 0;\n      top: 50%;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.left .arrow::before {\n      right: -20px;\n      margin-top: -10px;\n      border-left-color: #00000040;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.left .arrow::after {\n      right: -19px;\n      margin-top: -10px;\n      border-left-color: #fff;\n    }\n\n    /* RIGHT */\n    d3-tooltip .ngx-d3-tooltip.right {\n      -webkit-transform: translateY(-50%);\n              transform: translateY(-50%);\n      position: absolute;\n      left: 20px;\n      top: 0;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.right .arrow {\n      left: 0;\n      top: 50%;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.right .arrow::before {\n      left: -20px;\n      margin-top: -10px;\n      border-right-color: #00000040;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.right .arrow::after {\n      left: -19px;\n      margin-top: -10px;\n      border-right-color: #fff;\n    }\n\n    /* TOPRIGHT */\n    d3-tooltip .ngx-d3-tooltip.topRight {\n      position: absolute;\n      left: -15px;\n      bottom: 20px;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.topRight .arrow {\n      bottom: 0;\n      left: 15px;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.topRight .arrow::before {\n      bottom: -20px;\n      margin-left: -10px;\n      border-top-color: #00000040;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.topRight .arrow::after {\n      bottom: -19px;\n      margin-left: -10px;\n      border-top-color: #fff;\n    }\n\n    /* TOPLEFT */\n    d3-tooltip .ngx-d3-tooltip.topLeft {\n      position: absolute;\n      right: -15px;\n      bottom: 20px;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.topLeft .arrow {\n      bottom: 0;\n      right: 15px;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.topLeft .arrow::before {\n      bottom: -20px;\n      margin-right: -10px;\n      border-top-color: #00000040;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.topLeft .arrow::after {\n      bottom: -19px;\n      margin-right: -10px;\n      border-top-color: #fff;\n    }\n    /* BOTTOMRIGHT */\n    d3-tooltip .ngx-d3-tooltip.bottomRight {\n      position: absolute;\n      left: -15px;\n      top: 25px;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.bottomRight .arrow {\n      top: 0;\n      left: 15px;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.bottomRight .arrow::before {\n      top: -20px;\n      margin-left: -10px;\n      border-bottom-color: #00000040;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.bottomRight .arrow::after {\n      top: -19px;\n      margin-left: -10px;\n      border-bottom-color: #fff;\n    }\n\n    /* BOTTOMLEFT */\n    d3-tooltip .ngx-d3-tooltip.bottomLeft {\n      position: absolute;\n      right: -15px;\n      top: 25px;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.bottomLeft .arrow {\n      top: 0;\n      right: 15px;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.bottomLeft .arrow::before {\n      top: -20px;\n      margin-right: -10px;\n      border-bottom-color: #00000040;\n    }\n\n    d3-tooltip .ngx-d3-tooltip.bottomLeft .arrow::after {\n      top: -19px;\n      margin-right: -10px;\n      border-bottom-color: #fff;\n    }\n  "],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"component":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"outputs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"componentHost":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","name":"D3TooltipHostDirective"}]}]}],"cssTop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.top"]}]}],"cssLeft":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.left"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"}]}],"loadComponent":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}]}},"D3TooltipService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ApplicationRef"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"}]}],"createFromComponent":[{"__symbolic":"method"}],"showTooltip":[{"__symbolic":"method"}],"removeTooltip":[{"__symbolic":"method"}],"getDomElementFromComponentRef":[{"__symbolic":"method"}]}},"ITooltipOptions":{"__symbolic":"interface"},"ITooltipPosition":{"__symbolic":"interface"}},"origins":{"D3TooltipModule":"./src/app/modules/d3-tooltip/d3-tooltip.module","D3TooltipHostDirective":"./src/app/modules/d3-tooltip/d3-tooltip-host.directive","D3TooltipComponent":"./src/app/modules/d3-tooltip/d3-tooltip.component","D3TooltipService":"./src/app/modules/d3-tooltip/d3-tooltip.service","ITooltipOptions":"./src/app/modules/d3-tooltip/d3-tooltip.service","ITooltipPosition":"./src/app/modules/d3-tooltip/d3-tooltip.service"},"importAs":"ngx-d3-tooltip"}